webpack管理资源

在上一章，我们讲解了四种资源模块引入外部资源。除了资源模块，我们还可以通过 loader引入其他类型的文件。

什么是loader

loaderwebpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。 loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。在 webpack 的配置中，loader 有两个属性:

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

const path = require('path');
module.export = {
    output:{
        filename: 'my-first-webpack.bundle.js',
    },
    module: {
        rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    },
}

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性: test 和 use 。这告诉 webpack 编译器(compiler) 如下信息:

“嘿，webpack 编译器，当你碰到「在 require() / import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 use(使用) raw-loader 转换一下。”

加载CSS

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css- loader，并在 module 配置中添加这些 loader:

npm install --save-dev style-loader css-loader

webpack.config.js配置文件:

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

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果(被转换后的资源)传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。应保证 loader 的先后顺序: 'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误。webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader 。在此模块执行过程中，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的中。现有的 loader 可以支持任何你可以想到的 CSS 风格 - sass 和 less 等。安装less- loader:

npm install less less-loader --save-dev

webpack.config.js配置文件：

module: {
    rules: [
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader'],
      }
    ],
},

抽离和压缩CSS

在多数情况下，我们也可以进行压缩CSS，以便在生产环境中节省加载时间，同时还可以将CSS文件抽离成一个单独的文件。实现这个功能，需要mini-css-extract-plugin这个插件来帮忙。安装插件:

npm install mini-css-extract-plugin --save-dev

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。本插件基于 webpack v5 的新特性构建，并且需要 webpack 5 才能正常工作。之后将 loader 与 plugin 添加到你的 webpack 配置文件中:


const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
// 配置资源文件 module: {
    rules: [{
        test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
    ]
}

单独mini-css-extract-plugin插件不会将这些css加载到页面中。这里html-webpack-plugin帮助我们自动生产link标签或者在创建index.html文件时使用link标签。这时，link标签已经生成出来了，把我们打包好的 .css 文件加载进来。我们发现，.css文件被打包抽离到 dist 根目录下，能否将其打包到一个单独的文件夹里呢?修改配置文件:

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles/[contenthash].css'
        })
    ],
}

再次执行编译npx webpack,查看打包完成后的目录和文件,现在， app.html 文件引用的路径同样更新了。打开查看 .css 文件, 发现文件并没有压缩和优化，为了压缩输出文件，请使用类似于css-minimizer-webpack-plugin这样的插件。安装插件：

npm install css-minimizer-webpack-plugin --
save-dev

webpack.config.js文件配置:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = { // 生产模式
    mode: 'production',
    // 优化配置 
    optimization: { 
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    }, 
}

再次执行编译npx webpack, 查看打包成功后.css 文件,css 文件优化成功!

管理资源

webpack管理资源

什么是loader

加载CSS

抽离和压缩CSS