webpack3和webpack4區別

1.mode

webpack增加了一個mode配置，只有兩種值development | production。對不同的環境他會啟用不同的配置。

webpack4中通過內置的mode使用相應模式的內置優化。比如設置mode等於'development'，會將 process.env.NODE_ENV 的值設為 development。設置mode等於'production'，會將 process.env.NODE_ENV 的值設為 production。production 側重於打包后的文件大小，development側重於構建。

 

2.CommonsChunkPlugin

webpack.optimize.CommonsChunkPlugin已經從webpack4中移除。可使用optimization.splitChunks進行模塊划分（提取公用代碼）。

但是需要注意一個問題，默認配置只會對異步請求的模塊進行提取拆分，如果要對entry進行拆分，需要設置optimization.splitChunks.chunks = 'all'。

對應之前我們拆分runtime的情況，現在也有一個配置optimization.runtimeChunk，設置為true就會自動拆分runtime文件

module.exports = {
  optimization: {
    runtimeChunk: true,
    splitChunks: {
      vendors: {
        name:  'venders',
        chunks:  'all',
        minChunks: 2
    }
  }
}

 

3.mini-css-extract-plugin （CSS文件提取）

webpack4，刪除原 extract-text-webpack-plugin 配置，增加 mini-css-extract-plugin 配置

注意：mini-css-extract-plugin 的 filename 選項不支持函數

module.exports = {
  plugins: [
    new  MiniCssExtractPlugin({
      filename:  'css/[name].css'
    }),
  ],
}

module.exports = {
  module: {
    rules: [
      {
        test:/\.vue$/,
        loader: 'vue-loader',
      },
      { test: /\.css$/,
         use: [
                  {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../',
                      hmr: process.env.NODE_ENV === 'development',
                    },
                  },
                  'css-loader',
                ],
        },
    ]
  }
}

 

4.安裝依賴

新版 babel 使用新的命名空間 @babel

• @babel/core
• @babel/plugin-proposal-class-properties
• @babel/plugin-proposal-decorators
• @babel/plugin-syntax-dynamic-import
• @babel/plugin-transform-runtime
• @babel/preset-env
• @babel/runtime
• babel-loader
• @babel/polyfill

//.babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "ie >= 11"
          ]
        },
        "useBuiltIns": "usage" // 按需引入 polyfill
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ]
}

 

5.vue-loader。

vue-loader 15 注意要配合一個 webpack 插件才能正確使用

const { VueLoaderPlugin } = require('vue-loader') 

module.exports = {
  plugins: [ new VueLoaderPlugin() ]
}

6.UglifyJsPlugin

現在也不需要使用這個plugin了，只需要使用optimization.minimize為true就行，production mode下面自動為true

optimization.minimizer可以配置你自己的壓縮程序

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({ // 壓縮js
          cache:  true,
          parallel:  true  //開啟多線程
        }
      }),
      new OptimizeCSSAssetsPlugin({ // 壓縮css
        cssProcessorOptions: {
          safe: true
        }
      })
    ]
  }
}

7.移除loaders，必須使用rules（在3版本的時候loaders和rules 是共存的但是到4的時候只允許使用rules）

8.支持es6的方式導入JSON文件，並且可以過濾無用的代碼

let jsonData = require('./data.json')
import jsonData from './data.json'
import { first } from './data.json' // 打包時只會把first相關的打進去

{
  test: /\.json$/,  //用於匹配loaders所處理文件拓展名的正則表達式
  use: 'json-loader', //具體loader的名稱
  type: 'javascript/auto',
  exclude: /node_modules/
}

9.升級happypack插件（happypack可以進行多線程加速打包）

運行在node.js之上的webpack時單線程模型，也就是只能一個一個文件進行處理，不能並行處理，happypack可以將任務分解給多個子進程，最后將結果發給主進程，js是單線程模型，只能通過這種多線程的方式提高性能

vue-loader 不支持 HappyPack，官方建議用 thread-loader

 

const HappyPack = require('happypack');

exports.module = {
  rules: [
    {
      test: /.js$/,
      use: ['happypack/loader?id=babel'],// 將對.js文件的處理轉交給id為babel的HappyPack的實列
      exclude:/node_modules/
    }
  ]
};

exports.plugins = [
  new HappyPack({
    id: 'babel',// 用唯一的標識符id來代表當前的HappyPack 處理一類特定的文件
    loaders: [ 'babel-loader' ] // 如何處理.js文件，用法和Loader配置是一樣的
  })
];