Tree Shaking

• 生產環境去除沒有使用到的內容（開發環境沒有刪除，會影響調試）
• 只支持ESM規范（靜態引入，編譯時引入），不支持CJS（動態引入，執行時引入）

// webpack.config.js
// 和devServer同級
// 開發環境會自動加上，可不寫
optimization:{usedExports: true
}

• 由于@babel/polyfill并沒有export而是在window上掛載，因此不應當檢查shaking
• 對于沒有導出內容的都應該忽略

// package.json
"sideEffects": ["@babel/polyfill", "*.css"]

不同的打包模式

• 不同環境有對應的配置文件

• npm install webpack-merge-D 安裝精簡工具

• 通常將webpack配置文件放在build文件夾下

• package.json

{"scripts": {"dev": "webpack-dev-server --config ./build/webpack.dev.js","build": "webpack --config ./build/webpack.prod.js","dev:build": "webpack --config ./build/webpack.dev.js"},"devDependencies": {"@babel/cli": "^7.14.8","@babel/core": "^7.15.0","@babel/preset-env": "^7.15.0","babel-loader": "^8.2.2","clean-webpack-plugin": "^4.0.0-alpha.0","core-js": "^3.8.3","html-webpack-plugin": "~3.2.0","lodash": "^4.17.21","webpack": "~4.41.5","webpack-cli": "~3.3.10","webpack-dev-server": "~3.10.1","webpack-merge": "^5.8.0"}
}

• webpack.base.js

const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = {entry: path.resolve(__dirname, "../src/index.js"),output: {path: path.resolve(__dirname , "../dist"),filename: "js/[name].js",},module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader',// options: {//     plugins: [['@babel/plugin-transform-runtime', {//         absuluteRuntime: false,//         corejs: 3,//         helpers: true,//         regenerator: true,//         useESMoudles: false,//         version: '7.0.0-beta.0'//     }]]// }},exclude: path.resolve(__dirname, 'node_modules')},]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: path.resolve(__dirname, "../src/index.html"),excludeChunks: ['node_modules']}),new CleanWebpackPlugin(),],
};

• 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(),],devServer: {open: true,host: "localhost",port: 3333,proxy: {'/api': {target: 'http://study.jsplusplus.com',secure: false, // 如果target是https的pathRewrite: {'^/api': ''},changeOrigin: true}},hot: true,}
};
module.exports = merge(baseConfig, devConfig)

• webpack.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)