surroundings
win10 WEBSTRA 2019 + + + webpack4.x yarn
tree shaking 作用
Production environment is automatically enabled
Model needs to be arranged (not applicable filtering module), js have some comments as packetized:
/*! exports provided: add, sub, mul */ /*! exports used: add, mul */
File Structure
. ├── build // profile │ ├── build.js │ ├── bundle.js │ ├── common.js │ └── dev.js ├── dist directory packaged generated after // │ ├── 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 code
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 const add = function (a, b) { return a + b; }, sub = function (a, b) { return a - b; }, mul = function (a, b) { return a * b; };
/src/template/index.html template file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> </body> </html>
Package configuration file / build / under
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,
}
});
Packaging commands (package.json arranged in a script)
# Development environment, start the server the Yarn dev # development environment, packaged file the Yarn bundle # production environment, packed files yarn build