环境
win10 + webstrom 2019 + webpack4.x + yarn
tree shaking 作用
生产环境自动启用
开发模式需要配置（过滤不适用的模块），打包后的 js 会有一些注释如：
/*! exports provided: add, sub, mul */ /*! exports used: add, mul */
文件结构
. ├── build //配置文件 │ ├── build.js │ ├── bundle.js │ ├── common.js │ └── dev.js ├── dist //打包后生成的目录 │ ├── 6efdf170-app.js │ └── index.html ├── package.json ├── src │ ├── js │ │ ├── app.js │ │ └── math.js │ └── template │ └── index.html └── yarn.lock
package.json
{"name": "sample","version": "1.0.0","private": true,"license": "MIT","sideEffects": ["*.css"],"scripts": {"bundle": "webpack --config ./build/bundle.js","build": "webpack --config ./build/build.js","dev": "webpack-dev-server --config ./build/dev.js"},"devDependencies": {"clean-webpack-plugin": "^3.0.0","html-webpack-plugin": "^3.2.0","webpack": "^4.33.0","webpack-cli": "^3.3.3","webpack-dev-server": "^3.7.1","webpack-merge": "^4.2.1"} }
/src/js 中代码
app.js
import {add, mul} from './math.js';console.log("add(11 + 11): ", add(11, 11));
console.log("mul(11 + 11): ", mul(11, 11));window.document.body.innerHTML = '<h1>hello world</h1>';
math.js
export constadd = function (a, b) {return a + b;},sub = function (a, b) {return a - b;},mul = function (a, b) {return a * b;};
/src/template/index.html 模版文件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"></div> </body> </html>
/build/下的打包配置文件
build.js
const common = require('./common.js');
const merge = require('webpack-merge');
module.exports = merge(common, {mode: 'production',devtool: 'cheap-module-source-map'
});
bundle.js
const common = require('./common.js');
const merge = require('webpack-merge');
module.exports = merge(common, {mode: 'development',devtool : 'cheap-module-eval-source-map',optimization: {usedExports: true}
});
common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {entry: {app: './src/js/app.js'},output: {filename: '[hash:8]-[name].js'},plugins: [new HtmlWebpackPlugin({template: './src/template/index.html'}),new CleanWebpackPlugin()]
};
dev.js
const common = require('./common.js');
const bundle = require('./bundle.js');
const merge = require('webpack-merge');
const path = require('path');
module.exports = merge(common, bundle, {devServer: {contentBase: path.resolve('../dist'),host: "127.0.0.1",port: 12858,hot: true,hotOnly: true,}
});
打包命令（package.json 中 script 中配置的）
#开发环境，启动服务器 yarn dev #开发环境，打包文件 yarn bundle #生产环境， 打包文件 yarn build