《深入浅出 Webpack》笔记（使用 Loader）

Loader 可以看作具有文件转换功能的翻译官，配置里的 module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。以下配置告诉 Webpack 遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。

const path = require("path");

module.exports =
{
    // JavaScript 执行入口文件
    entry: "./main.js",

    output:
    {
        // 把所有依赖的模块合并输出到一个名为 “bundle.js” 文件中
        filename: "bundle.js",

        // 输出文件都放到 dist 目录下
        path: path.resolve(__dirname, "./dist")
    },

    module:
    {
        rules:
        [
            {
                test: /\.css$/,
                
                // 告诉 Webpack 在遇到以 .css 结尾的文件时；
                // 先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。
                use: ["style-loader", "css-loader"]
            }
        ]
    }
};

在配置 Loader 时需要注意的是:

• use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；
• 每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

给 Loader 传入参数的方式除了有 querystring 外，还可以通过 Object 方式传入，以上的 Loader 配置可以修改为如下：

{
    test: /\.css$/,

    // 告诉 Webpack 在遇到以 .css 结尾的文件时；
    // 先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。
    use:
    [
        {
            loader: "style-loader"
        },
        {
            loader: "css-loader",
            options:
            {
                minimize: true
            }
        }
    ]
}

除了在 webpack.config.js 配置文件中配置 Loader 外，还可以在源码中指定用什么 Loader 去处理文件。以加载 CSS 文件为例，修改上面的 main.js 如下：

require("style-loader!css-loader?minimize!./main.css");

这样就能指定对 ./main.css 这个文件先采用 css-loader 再采用 style-loader 转换。