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)