⭐webpack5开发指南（三）如何使用loader解析并压缩css资源

前言

我们在上一章节中使用四种资源模块来进行资源的引入✋，实际上webpack除了资源模块以外，还可以通过loader引入其他类型的资源，我们都知道在webpack中只能解析js、json这样的文件，那么其他文件则使用loader加载。本小节中主要讲解如何使用loader解析并加载css资源以及css预处理资源如less,同时也会使用相应插件对css资源进行抽离与压缩✨。

⚡️本小节主要知识点：

• loader概念
• style-loader与css-loader解析并加载css
• less-loader解析less
• 使用插件mini-css-extract-plugin进行css的合并与引入
• 使用插件css-minimizer-webpack-plugin对css资源进行压缩

什么是loader

Webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loader。下面代码是一个简单的loader案列，test使用正则匹配相应的资源文件，use表示在编译这些文件之前，应该用哪些loader进行预处理。

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

三、使用loader加载css

3.1 css的解析

npm install css-loader npm install style-loader

修改webpack.config.js配置，在module中添加一条css rules。

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

修改webpack.config.js配置后，我们在src/style.css中设置样式，在index.js中进行引用并添加到页面，执行npx webpack打包。

我们发现样式成功生效，并且观察结构可以看到我们在style.css中设置的样式已经成功加载到heade中，注意此处我们不仅安装了css-loader还安装了style-loader,如果仅仅使用css-loader是不够的，他不能够将我们的样式引入到head中。同时要注意，在webpack.config.js的use中，css-loader与style-loader的位置是很关键的,必须要将css-loader放置在后边，那么为什么位置很重要呢？

我们在解析时先执行css-loader再执行style-loader，这个顺序是从后往前加载的，webpack支持loader的链式调用，链式中的每一个loader都可以对我们的源进行转换且转换是逆序的，css-loader会将转换的源传递给style-loader，style-loader会返回webpack一个js，这样就完成了对css的解析及引用。

3.2 css预处理工具的解析

npm install less-loader less -D

修改webpack.config.js配置，修改正则匹配，添加less匹配，同时加入less-loader解析，注意less-loader要放在最后，要先使用less-loader对less文件进行源转换，再通过链式调用将源交由css-loader处理。

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

修改webpack.config.js配置后，我们在src/style.less中设置样式，在index.js中进行引用并添加到页面，执行npx webpack打包。 我们可以看到less文件被成功解析并引入。

3.3 css的抽离

在前两个小节中我们使用loader对css进行了解析并加载，但是加载后的内容都是直接放置在html中的，那么我们如何将其抽离，并使用link方式进行引入？

安装mini-css-extract-plugin插件，

npm install mini-css-extract-plugin -D 注意该插件基于webpack5构建，需要在webpack5环境下使用。

修改webpack.config.js配置，将插件mini-css-extract-plugin引入并在plugins中实例化，同时修改loader配置，之前我们通过style-loader将样式引入页面，现在我们需要将其替换为MiniCssExtractPlugin.loader，将样式通过link方式进行引入，配置完成后，执行npx webpack打包。

const path=require('path')
const MiniCssExtractPlugin =require('mini-css-extract-plugin')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,'./dist'),
        clean:true,
        assetModuleFilename:"images/[contenthash][ext]"
    },
    mode:'development',
    devtool:'inline-source-map',
    plugins:[
        new MiniCssExtractPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.(css|less)$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            },
        ]
    }
}

执行打包后，我们观察dist目录下的打包文件，我们发现该插件已经将我们的样式统一合并到main.css中。

同时在页面中，样式也已经成功使用link方式引入并生效。 自定义样式打包路径及名称，在实例化MiniCssExtractPlugin,使用filename属性，与上一章资源引入相同，命名使用hash自动命名。

  new MiniCssExtractPlugin(
            {
                filename:'styles/[contenthash].css',
            }
        )

3.4 css的压缩

npm install css-minimizer-webpack-plugin -D 修改webpack.config.js配置，将插件css-minimizer-webpack-plugin引入,注意该插件并不在plugins中实例化，而是在optimization中即优化中实例化，同时修改mode为production开发模式。

const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin =require('mini-css-extract-plugin')
const CssMinimizerPlugin =require('css-minimizer-webpack-plugin')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,'./dist'),
        clean:true,
        assetModuleFilename:"images/[contenthash][ext]"
    },
    mode:'production',
    devtool:'inline-source-map',
    plugins:[
        new HtmlWebpackPlugin(
            {
                template:'./index.html',
                filename:'customize.html',
                inject:'body'
            }
        ),
        new MiniCssExtractPlugin(
            {
                filename:'styles/[contenthash].css',
            }
        )
    ],
    devServer:{
        static:"./dist"
    },
    module:{
        rules:[
            {
                test:/\.(css|less)$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            },
        ] 
    },
    optimization:{
        minimizer:[
            new CssMinimizerPlugin()
        ]
    }
}

打包后我们可以看到css文件已经被压缩。

✍️总结

本小节中我们主要简单介绍了loader的概念，同时我们学习了使用style-loader与css-loader对css资源进行解析，对于less等预处理工具我们采用对应的less-loader进行解析，但是此时css资源是直接加载到页面上的，我们希望能够使用link方式进行合并引入，因此使用了插件mini-css-extract-plugin，最后我们使用插件css-minimizer-webpack-plugin对css资源进行了压缩，进一步提高性能。