我的webpack.config.js ：
const path = require('path')
const config = {
entry: "./src/app.js",
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.js$/, exclude: /(node_modules)/, use: 'babel-loader' }
]
}
}
module.exports = config
我的package.json ：
{
"name": "WebpackTest",
"sideEffects": false,
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"file-loader": "^1.1.11",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14"
},
"dependencies": {
"babel-loader": "^7.1.4"
}
}
index.html
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
app.js
import { cube } from './maths.js';
const root = document.querySelector('#root');
root.innerHTML = `<p>Hello mate</p>${cube(5)}`;
maths.js
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
通过运行webpack -d ， bundle.js为5.16kb。
通过运行webpack -p ， bundle.js为656字节。
我无法确定webpack如何between -p and -d进行区分。 配置文件中没有任何东西可以differentiates dev from prod ！ 而且，即使没有Uglify插件，Webpack在使用-p时也会使用这样的插件来生成缩小的 bundle。 有什么解释吗？
当您添加标志时，webpack会动态向配置添加内容。 像uglify插件或NamedModulesPlugin
因此，现在您只需要明确指出要Webpack做的事情和仅使用标志就可以魔术的一半之间