webpack学习笔记（四）--文件指纹、代码压缩

不同环境配置文件

• 1、增加不同环境的配置文件webpack.dev.js(开发环境)，webpack.prod.js(生产环境)
• 2、chunkhash不能跟热更新一起使用
• 3、webpack的js文件中的mode

  module.exports = {
    ...
    mode:'development'//'production'
    ...
  }
  

• 4、package.json增加一条script

   
   {
     'scripts':{
        'build':'webpack --config webpack.prod.js',//生产环境命令
        'dev':'webpack-dev-server --config webpack.dev.js --open'//开发环境命令
     }
   }
  

文件指纹

Hash

和整个项目的构建相关，只要项目中的文件有修改，整个项目构建的hash值就会发生改变

Chunkhash

不同的entry会生成不同的chunkhash值

• 1、output中的filename增加chunkhash

const path = require('path')
module.exports = {
  entry: {
    index:'./src/main.js',
    search:'./src/search.js'
  },
  output: {
    path:path.join(__dirname,'dist')
    filename:'[name][chunkhash:8].js'
  }
}

• 2、npm run build
• 3、如果报错,报错信息如下：

  ERROR in chunk search [entry]
  [name][chunkhash:8].js
  Cannot use [chunkhash] or [contenthash] for chunk in '[name][chunkhash:8].js' (use [hash] instead)

解决办法：请把plugins下面配置的热更新插件删掉：HotModuleReplacementPlugin()

Contenthash

根据文件内容来定义hash，文件内容不变，则contenthash不变;一般css会采用contenthash，js发生变化，不会导致css重新生成

css一般都会采用style-loader和css-loader，最终会通过style标签插入到页面上，不会生产css文件，所以需要使用MiniCssExtractPlugin插件

MiniCssExtractPlugin.loader跟style-loader的功能是互斥的，不能同时存在

• 1、安装 npm i mini-css-extract-plugin -D

• 2、webpack添加配置

    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    module.exports = {
      ...
      plugins:[
        new MiniCssExtractPlugin({
          filename:'[name]_[contenthash:8].css'
        })
      ],
      module:{
        rules:[
          {
            test:/\.(scss)$/,
            use:[
              MiniCssExtractPlugin.loader,
              'css-loader',
              'sass-loader'
            ]
          }
        ]
      }
    }
  

  • 3、npm run build

  图片文件指纹

file-loader用于处理图片和字体文件

• 1、安装 npm i file-loader -D
• 2、webpack.config.js中添加配置

  module.exports = {
      entry:{...},
      outpath:{path:...,filename:...},
      mode:'production',
      module:{
          rules:[
              {
                  test:/\.(jpg|png|gif|jpeg)$/,
                  use:{
                    'file-loader',
                    options:{
                      name:'img/[name]_[hash:8].[ext]'
                    }
                  }
              }
          ]
      }
  }
  
  

代码压缩

html压缩

使用html-webpack-plugin,设置压缩参数

• 1、安装 npm i html-webpack-plugin -D
• 2、webpack.prod.js添加配置

  const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  module.exports={
    ...
    plugins:[
       new HtmlWebpackPlugin({
            template:path.join(__dirname,'public/index.html'),
            filename:'index.html',//打包处理的文件名称
           // chunks:['search'],//生成html用哪些chunk
            inject:true,//打包出的js,css自动注入到html中
            minify:{
              html5:true,
              collapseWhitespace:true,
              preserveLineBreaks:false,
              minifyCSS:true,
              minifyJS:true,
              removeComments:false
            }
        }),
    ]
  }
  

提取css文件

使用mini-css-extract-plugin

• 1、安装 npm i mini-css-extract-plugin -D
• 2、webpack.prod.js添加配置

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  module.exports = {
    ...
   module:{
      rules:[
          {
              test:/\.css$/,
              use:[
              MiniCssExtractPlugin.loader,
              'css-loader'
              ]
          }
      ]
  }
    plugins:[
      new MiniCssExtractPlugin()
    ]
  }
  

• 3、npm run build

css压缩

使用optimize-css-assets-webpack-plugin，同时使用预处理器cssnano

• 1、安装 npm i optimize-css-assets-webpack-plugin cssnano -D
• 2、webpack.prod.js添加配置

  const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
  module.exports = {
    ...
    plugins:[
      new OptimizeCssAssetsWebpackPlugin({
         assetNameRegExp:/\.css$/g,
          cssProcessor:require('cssnano')
      })
    ]
  }
  

• 3、npm run build

js压缩

webpack4内置uglifyjs-webpack-plugin,生产环境会触发压缩

清理目录

使用clean-webpack-plugin

• 1、安装npm i clean-webpack-plugin -D
• 2、webpack添加配置

  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  module.exports = {
    ...
    plugins:[
      new CleanWebpackPlugin()
    ]
  }
  
  

• 3、npm run build

示例源码