Webpack4教程 - 第二部分，使用loader处理scss,图片以及转换JS

前端开发作者： 2024-08-22 01:40:02

今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后，是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loader。首先，我们会学习如何使用那些可用的l

css-loader

npm install css-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,use: 'css-loader'
      }
    ]
  }
};

rules

use

串联多个loader

npm install style-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,use: ['style-loader','css-loader']
      }
    ]
  },}

/* style.css */
body {
  background-color:black;
}

// index.js
import './style.css'

Webpack尝试解析 style.css 文件
文件名与正则表达式/\.css$/匹配
文件被 css-loader 编译
css-loader 处理后的结果会被传到 style-loader
最后，style-loader 返回一串JavaScript代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
  <style type="text/css">body {
    background-color:black;
  }</style></head>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

sass-loader

npm install sass-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,'css-loader','sass-loader']
      }
    ]
  },}

npm install url-loader file-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,'sass-loader']
      },{
        test: /\.(png|jpg|gif)$/,use: [
          {
            loader: 'url-loader',options: {
              limit: 5000
            }
          }
        ]
      }
    ]
  }
};

body {
  background-image: url('./big-background.png');
}
.icon {
  background-image: url('./icon.png');
}

<style type="text/css">body {
  background-image: url(ca3ebe0891c7823ff1e137d8eb5b4609.png); }

.icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh1DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }
</style>

npm install babel-loader @babel/core @babel/preset-env

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,exclude: /(node_modules)/,use: {
          loader: 'babel-loader',options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_66405.html

相关资讯： Webpack4教程 - 第二部分，使用loader处理scss 图片以及转换JS