node.js 开始使用 webpack 4 的问题

Issues with getting started with webpack 4

提问by sakhunzai

I am following the tutorial exactly as given here. But I am amazed that the docs seems outdated. e.g

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

npx webpack src/index.js dist/bundle.jsfails with:

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

CLI 移动到一个单独的包中：webpack-cli。除了 webpack 本身之外，请安装 'webpack-cli' 以使用 CLI。-> 使用 npm 时： npm install webpack-cli -D -> 使用 yarn 时： yarn add webpack-cli -D

If I install webpack-cli and try again I see this error:

如果我安装 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

哈希：af9bc06fd641eb0ffd1e 版本：webpack 4.0.0 时间：3865ms 构建时间：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 字节 {0} [内置] + 1 个隐藏模块

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

多 ./src/index.js dist/bundle.js 模块中的错误未找到：错误：无法解析“/var/app/webpack_demo”@多 ./src/index.js 中的“dist/bundle.js” dist/bundle.js

I hope I am not doing something crazy, given the popularity of webpack the documentation should reflect the actual behavior. Let me know if I am doing something wrong.

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

Edit

编辑

A details description of upgrade to webpack 4,that might be helpful

升级到webpack 4 的详细描述，可能会有所帮助

回答by Iurii Budnikov

You can pass modeparam in the webpack config or cli command.

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

Config: mode: 'development'or mode: 'production'

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

CLI: webpack --mode developmentor webpack --mode production

命令行界面：webpack --mode development或webpack --mode production

回答by Carloluis

The Webpack team is working on updating the package docs asap.New guides and docs are available in the webpack.js.orgofficial site.

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

In the meantime,You can also read related posts on medium:

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

• webpack 4: mode and optimization
• webpack 4: released today!!

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

Check on GitHub this Webpack-Demoproject intended to be a Webpack 4 tutorial. Previous and others links to helpful resources used in the webpack configs are included in the project's Readme. It has two zero-config builds (using the new webpack modeoption which includes a sets of defaults), and another two using custom configs.

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

---

---

Since webpack-4, the CLI has been move to webpack-clitherefore you need to install also this package in your devDependencies. Also, webpackexpect the new modeconfiguration to be set either on the CLI run or the config object.

从webpack-4 开始，CLI 已经转移到了，webpack-cli因此你还需要在你的devDependencies. 此外，webpack期望在modeCLI 运行或 config 对象上设置新配置。

CLI usage in your npmscripts:

npm脚本中的CLI 用法：

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

Set modeproperty in your webpack config object:

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

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

If mode value isn't specified, webpack uses the productionvalue (defaulted option). But warns you in the output with:

如果没有指定 mode 值，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.

配置中的警告

'mode' 选项尚未设置。将 'mode' 选项设置为 'development' 或 'production' 以启用此环境的默认值。

Webpack modereduce the required configuration for an useful build by using a set of defaults (default values for configuration properties depending the modevalue):

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

• productionenables all kind of optimizations to generate optimized bundles
• developmentenables useful error messages and is optimized for speed
• noneis a hidden mode which disables everything

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

Read more on release notes & changelog

阅读有关发行说明和变更日志的更多信息

回答by C.N

It will be updated very soon, see thislink for information

它将很快更新，请参阅此链接以获取信息

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!

我们非常接近完成迁移指南和 v4 文档添加！要跟踪进度或提供帮助，请访问我们的文档存储库，查看下一个分支，并提供帮助！

回答by Aaqib

Got the same issue and after a bit of research found its a problem to be fixed as you can see on this Github thread

遇到了同样的问题，经过一些研究发现它有一个问题需要解决，正如你在这个Github 线程上看到的

One of the options:

选项之一：

Inside package.jsonset scriptsto either developmentor productionmode

内部package.json设置scripts为developmentor 或productionmode

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

And now when you run npm run devit will give you bundle.jsbut not minified.

现在，当您运行npm run dev它时，它会给您bundle.js但不会缩小。

But when you run npm run buildit will give you a minified bundle

但是当你运行npm run build它会给你一个缩小的包

回答by Dinesh Pandiyan

Webpack 4 docs are not ready yet. I recently migrated from webpack 3 to 4 and it took me quite some time to figure out all the issues.

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

Here'a my sample repo you can use as reference for migrating from webpack 3 to 4.

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

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

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

There's one commit specific for migration. Take a look at that for more info.

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