系列博客鏈接

• webpack4入門學習筆記(一)
• webpack4入門學習筆記(二)
• webpack4入門學習筆記(三)--Babel的使用
• webpack4入門學習筆記(四)--Tree Shaking與拆分配置文件

筆記的代碼是在前面筆記基礎上修改的，可以下載代碼：github參考或是先看前面的筆記。

Tree Shaking使用

Tree Shaking可以用來剔除JavaScript中用不上的死代碼。它依賴靜態的ES6模塊化語法，例如通過import和export導入導出。

需要註意的是要讓Tree Shaking正常工作的前提是JavaScript代碼必須采用ES6模塊化語法，因為ES6

接下來配置Webpack讓Tree Shaking生效

webpack4默認保留ES6模塊化語句，並沒有通過Babel將其轉換
修改.babelrc文件為如下：

//.babelrc

{
   "presets": [["@babel/preset-env",{
      "useBuiltIns": "usage",
      "corejs": 2,
      "modules":false //關閉 Babel 的模塊轉換功能，保留原本的 ES6 模塊化語法
      //默認是auto，取值還可以是 amd, umd, systemjs, commonjs，auto等
   }]]
}
 

修改webapck.config.js，添加

optimization: {
  usedExports: true
}

到module.exports{}中

module.exports={
　mode: 'development',
  optimization: {
  //開發壞境使用tree shaking時加usedExports: true
    usedExports: true　
  },
}

還需通過package.json的"sideEffects"屬性來告訴webpack哪些模塊是可以忽略掉，如果沒有則設置為false，來告知webpack，它可以安全地刪除未用到的export

修改package.json

{
  "name": "your-project",
  "sideEffects": false
}

有的模塊沒有導出模塊，在Tree Shaking模式下就會被忽略，所以我們需要把這些模塊做處理，不需要Tree Shaking對這些模塊進行處理，可以改為一個數組：

{
  "name": "your-project",
  "sideEffects": ["*.css"]
}

"sideEffects": ["*.css"]表示不對所以css模塊使用Tree Shaking處理。

index.js

//tree shaking import export
import {cube} from './math.js'

let component = () => {
  let element = document.createElement('pre')
  element.innerHTML = [
    'Hello webpack!',
    '2 cubed is equal to ' + cube(2)
  ].join('\n\n');
  console.log(cube)
  
  return element;
}
document.body.appendChild(component());

main.js

export let square= (x) => {
  console.log(x)
  return x * x;
}

export let cube = (x) => {
  console.log(x)
  return x * x * x;
}

運行npm run build，然後打開打包後的js文件:main.js找到下面這段文字

/*!*********************!*   !*** ./src/math.js ***!
   \*********************/
 /*! exports provided: square, cube */
 /*! exports used: cube */
 /***/

從上面這段文字可以看出Tree Shaking生效了，但是在開發環境下，並沒有把沒有用的代碼刪掉，因為　環境下還需要對代碼進行調試。

我們已經找出需要刪除的“未引用代碼(dead code)”，然而，不僅僅是要找出，還要刪除它們。為此，我們需要將mode配置選項設置為production，將optimization對象刪掉，修改devtool配置選項

webpack.config.js

module.exports = {
  mode: 'production',
  devtool: 'cheap-module-source-map'
}

運行npm run build，查看打包結果就可以看到沒有用的代碼被刪掉了。

Tree Shaking參考代碼下載鏈接：github(demo4)

Develoment和Production不同環境的配置

因為在不同的環境下，webpack的配置稍微有點區別，如果我們需要在不同的換將下切換，就得修改webpack配置，這是很麻煩而且還容易改錯，所以我們需要把配置文件進行拆分。

在項目根目錄下新建build文件夾，然後在build文件夾中新建webpack.dev.js、webpack.prod.js和webpack.base.js三個文件

webpack.dev.js：是開發環境
webpack.prod.js：是生產環境
webpack.base.js：是開發環境和生產環境都用到的配置

這幾個文件之間的結合靠‘webpack-merge‘這個插件。

安裝
npm i webpack-merge -D

//webpack.dev.js

const webpack=require('webpack')
const merge = require('webpack-merge')
const baseConfig=require('./webpack.base')

const devConfig={
  mode: 'development', 
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    usedExports: true
  },
  devServer: {
    contentBase: './dist',
    // open: true, //自動打開瀏覽器
    // port: 8080,
    hot: true,　//啟用webpack的熱模塊替換功能
    //hotOnly: true　
    //devServer.hot在沒有頁面刷新的情況下啟用熱模塊替換作為構建失敗時的後備
  }
}

module.exports=merge(baseConfig,devConfig)

//webapck.prod.js

const merge = require('webpack-merge')
const baseConfig=require('./webpack.base')

const prodConfig={
  mode: 'production', 
  devtool: 'cheap-module-source-map'
}

module.exports=merge(baseConfig,prodConfig)

但是這兩個文件還有大量重復的代碼，新建webpack.base.js

//webpack.base.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')

module.exports={
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname,'dist')
  },
  module: {
    rules:[
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]', 
            outputPath: 'images/', 
            limit: 2048           
          }
        }
      },
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
          'postcss-loader' 
        ]
      },
      {
        test: /\.scss$/,
        use:[
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true 
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    }),
    new cleanWebpackPlugin(),
  ]
}

修改package.json的script:

{
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  },
}

開發環境：運行npm run dev，打開瀏覽器訪問http://localhost:8080/就可以看到結果
生產環境：運行npm run build

配置文件拆分代碼下載連接：github(demo5)

webpack4入門學習筆記(四)--Tree Shaking與拆分配置文件