webpack 4 入门的问题

Question

我完全按照给出的教程进行操作 here。但令我惊讶的是，这些文档似乎已经过时了。例如

npx webpack src/index.js dist/bundle.js 失败：

The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D

如果我安装 webpack-cli 并重试，我会看到这个错误：

Hash: af9bc06fd641eb0ffd1e Version: webpack 4.0.0 Time: 3865ms Built at: 2018-2-26 05:10:45 1 asset Entrypoint main = main.js 1 (webpack)/buildin/module.js 519 bytes {0} [built] 2 (webpack)/buildin/global.js 509 bytes {0} [built] [3] ./src/index.js 212 bytes {0} [built] [4] multi ./src/index.js dist/bundle.js 40 bytes {0} [built] + 1 hidden module

WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in multi ./src/index.js dist/bundle.js Module not found: Error: Can't resolve 'dist/bundle.js' in '/var/app/webpack_demo' @ multi ./src/index.js dist/bundle.js

我希望我没有做疯狂的事情，鉴于 webpack 的流行，文档应该反映实际行为。如果我是，请告诉我做错事了。

编辑

升级到 webpack 4 的详细说明，可能会有帮助

Answer 1

很快就会更新，详见thislink

We are very close to having out Migration Guide and v4 Docs Additions complete! To track the progress, or give a helping hand, please stop by our documentation repository, checkout the next branch, and help out!

Answer 2

遇到了同样的问题，经过一些研究发现它是一个需要修复的问题，正如您在此处看到的 Github thread

其中一个选项：

在 package.json 内将 scripts 设置为 development 或 production 模式

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

现在当你运行 npm run dev 它会给你 bundle.js 但 没有缩小 .

但是当你运行 npm run build 它会给你一个 minified bundle

Answer 3

您可以在 webpack 配置或 cli 命令中传递 mode 参数。

配置：mode: 'development' 或 mode: 'production'

CLI：webpack --mode development 或 webpack --mode production

Answer 4

Webpack 4 文档还没有准备好。我最近从 webpack 3 迁移到 4，我花了很长时间才弄清楚所有问题。

这是我的示例存储库，您可以将其用作从 webpack 3 迁移到 4 的参考。

https://github.com/flexdinesh/react-redux-boilerplate

有一个特定于迁移的提交。看看那个了解更多信息。

Answer 5

~~Webpack 团队正在努力尽快更新包文档。~~ webpack.js.org 官方网站上提供了新的指南和文档。

~~同时，~~您也可以在medium上阅读相关帖子：

检查 GitHub 这个 Webpack-Demo 项目打算成为 Webpack 4 教程。项目的 Readme 中包含指向 webpack 配置中使用的有用资源的先前链接和其他链接。它有两个 zero-config 构建（使用新的 webpack mode 选项，其中包括一组默认值），另外两个使用自定义配置。

自 webpack-4 起，CLI 已移至 webpack-cli，因此您还需要在 devDependencies 中安装此软件包。此外，webpack 期望在 CLI 运行或配置对象上设置新的 mode 配置。

CLI 在您的 npm 脚本中的使用：

"scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
}

在您的 webpack 配置对象中设置 mode 属性：

{
    mode: 'production' // | 'development' | 'none'
}

如果未指定模式值，webpack 使用 production 值（默认选项）。但是在输出中警告你：

WARNING in configuration

The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

Webpack mode 通过使用一组默认值（配置属性的默认值取决于 mode 值）减少有用构建所需的配置：

production 启用各种优化以生成优化包
development 启用有用的错误消息并针对速度进行了优化
none 是一种隐藏模式，可以禁用所有内容

阅读更多关于release notes & changelog

Answer 6

在 webpack 配置文件中：

const isProd = process.env.NODE_ENV === 'production';
module.exports = {
  ***
  mode: isProd ? 'production' : 'development'
  ***
};

在package.json中：

***
"scripts": {
   "dev": "node ./app.js",
   "prod": "cross-env NODE_ENV=production npm run dev",
   ***
},
***
"dependencies": {
   "cross-env": "^7.0.2",
   ***
}
***

webpack 4 入门的问题

Issues with getting started with webpack 4

node.js

webpack

webpack-4

编辑