开始使用webpack 4时出现的问题

Question

我正按照这里的教程进行操作。但是，我惊讶地发现文档似乎已经过时了。例如，npx webpack src/index.js dist/bundle.js失败了，并显示以下内容：

CLI已移动到一个单独的包中：webpack-cli。请在安装webpack本身的同时安装'webpack-cli'来使用CLI。 -> 如果使用npm：npm install webpack-cli -D -> 如果使用yarn：yarn add webpack-cli -D

如果我安装webpack-cli并再次尝试，则会出现以下错误：

哈希：af9bc06fd641eb0ffd1e版本：webpack 4.0.0时间：3865ms构建于：2018年2月26日05:10:45 1个资产入口点main = main.js 1 (webpack)/buildin/module.js 519字节 {0} [内置] 2 (webpack)/buildin/global.js 509字节 {0} [内置] [3] ./src/index.js 212字节 {0} [内置] [4] multi ./src/index.js dist/bundle.js 40字节 {0} [内置] + 1 hidden module

警告：在配置中，尚未设置'mode'选项。设置'mode'选项为'development'或'production'以启用此环境的默认值。

错误：无法解析'/var/app/webpack_demo'中的'dist/bundle.js'，在多个./src/index.js dist/bundle.js中没有找到模块：错误：

我希望我没有做错什么事情，鉴于webpack的普及度，文档应该反映实际行为。如果我做错了什么，请告诉我。

编辑

升级到webpack4的详细说明可能会有所帮助。

- sakhunzai

---

似乎文档仍停留在webpack 3阶段。 - Agney

@DaveKaye，你的评论毫无意义，文档应该反映出Webpack的最新变化，否则这些文档就是误导和浪费时间，特别是对于初学者。甚至它们都没有提到文档所涉及的版本。 - sakhunzai

你也可以查看这个 webpack-4-demo 项目。希望能对你有所帮助！ - Carloluis

一个相关的讨论 https://news.ycombinator.com/item?id=16615275 - sakhunzai

现在的配置页面仍然没有模式，而且版本是4.5.0 :) - Tien Do

Answer 1

你可以在 webpack 的配置或命令行中传递 mode 参数。

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

命令行: webpack --mode development 或 webpack --mode production

- Iurii Budnikov

Answer 2

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

同时，您还可以在medium上阅读相关文章：

• webpack 4：模式和优化
• webpack 4：今天发布！

查看GitHub上的Webpack-Demo项目，旨在成为Webpack 4教程。 该项目包含以前使用在webpack配置中的其他有用资源链接，请参见Readme。 它有两个零配置构建（使用新的webpackmode选项，其中包括一组默认值），另外两个使用自定义配置。

---

自从webpack-4之后，CLI已经移动到webpack-cli，因此您需要在devDependencies中安装这个包。 另外，webpack期望新的mode配置是在CLI运行或配置对象中设置的。

在您的npm脚本中使用CLI：

"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 是一个隐藏模式，禁用所有内容

在发布说明和更改日志中了解更多。

- Carloluis

Answer 3

我遇到了同样的问题，在做了一些研究之后，发现这是可以解决的问题，你可以查看这个 Github讨论串

其中一个解决方案:

在 package.json 文件中将 scripts 设置为 development 或 production 模式。

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

现在当你运行 npm run dev 时，它会给你 bundle.js ，但没有被压缩。

但是当你运行 npm run build 时，它会给你一个被压缩的 bundle。

- Aaqib

Answer 4

很快就会有更新，详情请点击这个链接

我们的迁移指南和v4文档补充即将完成！您可以前往我们的文档仓库查看进度，并提供帮助。

- C.N

Answer 5

< p >Webpack 4 文档尚未准备好。最近我从 webpack 3 迁移到了 webpack 4，花了相当长的时间解决所有问题。

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

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

有一个特定于迁移的提交。请查看该提交以了解更多信息。

- Dinesh Pandiyan

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",
   ***
}
***

- user6250381