【Webpack】常用 loaders 与配置

[swiftwind0405]

常用 loaders

• 加载文件
  • raw-loader：把文本文件的内容加载到代码中去。
  • file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件。
  • url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去。
  • svg-inline-loader：把压缩后的 SVG 内容注入到代码中。
  • image-loader：加载并且压缩图片文件。
  • json-loader：加载 JSON 文件。
• 转换脚本语言
  • babel-loader：把 ES6 转换成 ES5，支持 react 的 JSX。
  • ts-loader：把 TypeScript 转换成 JavaScript。
  • awesome-typescript-loader：把 TypeScript 转换成 JavaScript，性能要比 ts-loader 好。
• 转换样式文件
  • css-loader：加载 CSS，支持模块化、压缩、文件导入等特性。
  • style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
  • sass-loader：把 SCSS/SASS 代码转换成 CSS。
  • postcss-loader：扩展 CSS 语法，使用下一代 CSS。
  • less-loader：把 Less 代码转换成 CSS 代码。
• 检查代码
  • eslint-loader：通过 ESLint 检查 JavaScript 代码。
  • tslint-loader：通过 TSLint 检查 TypeScript 代码。
• 其它
  • vue-loader：加载 Vue.js 单文件组件。
  • i18n-loader：加载多语言版本，支持国际化。
  • ignore-loader：忽略掉部分文件。
  • ui-component-loader：按需加载 UI 组件库，例如在使用 antd UI 组件库时，不会因为只用到了 Button 组件而打包进所有的组件。

loader 的使用

loader 可以配置以下参数:

• test: 匹配处理文件的扩展名的正则表达式
• use: loader 名称
• include/exclude: 手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
• query: 为 loader 提供额外的设置选项

loader 是链式调用，所以执行顺序是从右到左的。

转换脚本语言

babel-loader

presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性，一个 Presets 对一组新语法特性提供支持，多个 Presets 可以叠加。 Presets 其实是一组 Plugins 的集合，每一个 Plugin 完成一个新语法的转换工作。Presets 是按照 ECMAScript 草案来组织的。

preset	description
@babel/preset-env	env 包含当前所有 ECMAScript 标准里的最新特性
@babel/preset-react	支持 React 开发中的 JSX 语法

需要安装：

//安装插件 --@babel/core是babel核心库
npm install babel-loader @babel/core -D

//同时要按装，babel-loader只是打通webpack的一个桥梁，并不会转义代码，需要借助@babel/preset-env 来做语法的转换
npm install @babel/preset-env -D

//还有继续安装@babel/polyfill -- 作用是帮助低版本的浏览器弥补缺失的变量以及函数，同时可以在options配置，根据业务代码来做低版本的缺失弥补，这样打包代码可以做到精简，注意的是，这个插件只适合做业务代码带包，因为会污染全局
npm install @babel/polyfill -D

1.配置 .babelrc

weback.config.js

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

项目根目录下增加 .babelrc 配置文件
.babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

2. 直接配置在 babel-loader 中

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

样式文件的转换

css最基本的编译要依靠于style-loader、css-loader这两个加载器，所谓最基本，就是在不考虑使用css预处理器以及css后处理器的情况。预处理器包括less、scss、sass、stylus，后处理器如postcss的autoprefixer等。首先我们先弄明白各加载器的作用：

• style-loader，将所有处理好的css样式以行内元素style标签的格式动态注入到界面的head标签中去。
• css-loader，用来处理css样式，例如把css中类似@import()或者url()这样的引用资源进行引入或者处理。
• autoprefixer，postcss提供用来自动处理css在不同浏览器之间前缀等问题，从这里我们也可以看出，使用autoprefixer需要先引入postcss。
• 预处理-loader，所有预处理器都是以css为终点生成文件的一种专门的编程语言，为css增加了一些编程特性。

css-loader

• 只负责加载 css 模块,不会将加载的 css 样式应用到 html
• importLoaders 用于指定在 css-loader 前应用的 loader 的数量
• 查询参数 modules 会启用 CSS 模块规范

webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }
  ];
}

style-loader

• 负责将 css-loader 加载到的 css 样式动态的添加到 html-head-style 标签中
• 一般建议将 style-loader 与 css-loader 结合使用

postcss-loader

autoprefixer 是 css 后处理器 postcs s提供的一个对 css3 中个别属性在不同浏览器下需要添加浏览器前缀的样式处理工具，因此在使用 autoprefixer 之前，我们需要安装 postcss-loader 来加载它。

webpack.config.js

module: {
        rules: [{
            test: /\.css$/,
            use: [
                { loader: "style-loader" },
                { loader: "css-loader",options: { importLoaders: 1 } },//importLoaders解决由于css-loader处理文件导入的方式导致postcss-loader不能正常使用的问题
                { loader: "postcss-loader" } //指定postcss加载器
            ],
            exclude: /node_modules/
        }]
    }

根目录下新建 postcss.config.js 配置文件：

module.exports = {
    plugins: [
        require("autoprefixer")({overrideBrowserslist:'last 5 version'}) // overrideBrowserslist最终生成的css兼容最近的N个版本
    ]
}

需要注意，由于css-loader处理文件导入的方式，因此加载器postcss-loader不能与CSS模块一起使用。 为了使它们正常工作，可以添加 css-loader 的importLoaders选项。

也可以直接写在loader里：

{ loader: 'postcss-loader', options: { plugins: loader => [ require('autoprefixer')({overrideBrowserslist: "last 5 version"}) ] } }

module.exports = {
    module: {
        rules: [
            {
                test: /\.less/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
};

loader配置的顺序不可调换，因为 less-loader 是把 less 转换成 css，而 css-loader 是解析处理 css 里的 url 路径，并将 css 文件转换成一个模块，style-loader 是将 css 文件变成 style 标签插入到 head 中。

如果要转换 less 或者 sass，那么除了 loader，还需要安装 less 或者 sass：

npm install less less-loader -D

分离 css 文件

安装 mini-css-extract-plugin，将 'style-loader' 修改为 {loader: MiniCssExtractPlugin.loader}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.less/,
                use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader', 'less-loader']
            }
        ]
    },
	plugins: [
		new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
	]
};

此插件为每个包含 CSS 的 JS 文件创建一个单独的 CSS 文件，并支持 CSS 和 SourceMap 的按需加载。
注意：这里说的每个包含 CSS 的 JS 文件，并不是说组件对应的 JS 文件，而是打包之后的 JS 文件.

加载文件

file-loader

• file-loader 可以解析项目中的 url 引入（不仅限于 css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
• 默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /.(png|jpg)$/,  // 图片或者字体等文件
                use: [
                    {
                          loader: "file-loader",
					      options: {
					        name: "[name]_[hash].[ext]",
					        outputPath: "images/"
					      }
                        }
                    }
                ]
            }
        ]
    }
};

url-loader

• url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
• url-loader 把资源文件转换为 URL，file-loader 也是一样的功能。不同之处在于 url-loader 更加灵活，它可以把小文件转换为 base64 格式的 URL，从而减少网络请求次数。url-loader 依赖 file-loade

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /.(png|jpg)$/,  // 图片或者字体等文件
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240,    // 处理成 base64 的边界值，单位是字节
							outputPath: 'images' //如果希望图片存放在单独的目录下，那么需要指定outputPath
                        }
                    }
                ]
            }
        ]
    }
};

参考文档

• 常用 Loaders · 深入浅出 Webpack

[swiftwind0405]

• 没有理解style-loader
  • style-loader详细使用说明
• 跟着这篇文章搭建项目：一步步从零开始用 webpack 搭建一个大型项目