【Webpack】在 webpack 中对 css 的优化

1、提取 css 文件

npm 下载插件

npm i mini-css-extract-plugin

在 webpack.config.js 中使用

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

....
module: {
    rules: [
      {
        test: /\.css$/i,
        /*可以使用 MiniCssExtractPlugin 来专门分出 css 文件*/
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
plugins:[
 new MiniCssExtractPlugin({
  filename:'css/main.css'
 })
],
....

2、压缩 css 文件

npm 下载插件

npm i optimize-css-assets-webpack-plugin

在 webpack.config.js 中使用

const OptimizeCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')
....
plugins:[new OptimizeCssAssetsWebpackPlugin()],
....

标签：MiniCssExtractPlugin,npm,plugin,....,webpack,Webpack,css
来源： https://www.cnblogs.com/RikkaXl/p/15853528.html