Question

我的 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时生成缩小包。有什么解释吗？

Answer 1

当您添加标志时，webpack会动态地向配置中添加内容。像uglify插件或NamedModulesPlugin

所以现在你在明确你希望webpack做什么和通过使用标志来获得魔法之间的中途

https://survivejs.com/webpack/foreword/

Webpack在开发和生产中的行为方式如何

1 个答案: