【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()],
....
上一篇:Python实现链表


下一篇:Koa基础使用以及配置开发热加载/webpack调试