【Webpack】在 webpack 中的优化

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()],
....

3、压缩 js 代码

只需将模式改为生产模式即可

mode:'prudction',

4、压缩 html 代码

npm i html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin');//需要 npm 下载依赖
......
  plugins:[
      new HtmlWebpackPlugin({
          template:'./src/index.html',
          //压缩 html 代码
          minify:{
              //移除空格
              collapseWhitespace:true,
              //删除注释
              removeComments:true
          }
      })
  ],
......