webpack學習筆記（四）--文件指紋、代碼壓縮

不一樣環境配置文件

• 一、增長不一樣環境的配置文件webpack.dev.js(開發環境)，webpack.prod.js(生產環境)
• 二、chunkhash不能跟熱更新一塊兒使用
• 三、webpack的js文件中的mode

  module.exports = {
    ...
    mode:'development'//'production'
    ...
  }
  複製代碼

• 四、package.json增長一條script

  {
     'scripts':{
        'build':'webpack --config webpack.prod.js',//生產環境命令
        'dev':'webpack-dev-server --config webpack.dev.js --open'//開發環境命令
     }
   }
  複製代碼

文件指紋

Hash

和整個項目的構建相關，只要項目中的文件有修改，整個項目構建的hash值就會發生改變

Chunkhash

不一樣的entry會生成不一樣的chunkhash值

• 一、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'
  }
}
複製代碼

• 二、npm run build
• 三、若是報錯,報錯信息以下：

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的功能是互斥的，不能同時存在

• 一、安裝 npm i mini-css-extract-plugin -D

• 二、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'
            ]
          }
        ]
      }
    }
  複製代碼

  • 三、npm run build

  圖片文件指紋

file-loader用於處理圖片和字體文件

• 一、安裝 npm i file-loader -D
• 二、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,設置壓縮參數

• 一、安裝 npm i html-webpack-plugin -D
• 二、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壓縮

使用optimize-css-assets-webpack-plugin，同時使用預處理器cssnano

• 一、安裝 npm i optimize-css-assets-webpack-plugin cssnano -D
• 二、webpack.prod.js添加配置

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

• 三、npm run build

js壓縮

webpack4內置uglifyjs-webpack-plugin,生產環境會觸發壓縮

清理目錄

使用clean-webpack-plugin

• 一、安裝npm i clean-webpack-plugin -D
• 二、webpack添加配置

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

• 三、npm run build

示例源碼