30

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

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 bytes {0} [built ] 2 (webpack)/buildin/global.js 509 字节 {0} [built] [3] ./src/index.js 212 字节 {0} [built] [4] multi ./src/index.js dist/ bundle.js 40 字节 {0} [内置] + 1 个隐藏模块

配置中的警告 'mode' 选项尚未设置。将“模式”选项设置为“开发”或“生产”以启用此环境的默认值。

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

我希望我没有做一些疯狂的事情，鉴于 webpack 的流行，文档应该反映实际行为。让我知道我是否做错了什么。

编辑

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

4

6 回答 6

46

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

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

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

于 2018-02-28T20:49:25.610 回答
13

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

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

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

自以来，CLI 已移至，webpack-cli因此您还需要在您的devDependencies. 此外，期望在modeCLI 运行或配置对象上设置新配置。

npm脚本中的 CLI 用法：

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

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

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

如果未指定 mode 值，webpack 将使用该production值（默认选项）。但在输出中警告您：

配置中的警告

'mode' 选项尚未设置。将“模式”选项设置为“开发”或“生产”以启用此环境的默认值。

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

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

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

于 2018-03-08T16:54:43.197 回答
8

遇到了同样的问题，经过一番研究后发现这是一个需要解决的问题，正如您在这个Github 线程上看到的那样

选项之一：

内部package.json设置scripts为developmentorproduction模式

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

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

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

于 2018-02-27T15:58:39.823 回答
5

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

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

于 2018-02-26T14:01:06.047 回答
1

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

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

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

有一个特定于迁移的提交。看看那个以获取更多信息。

于 2018-03-06T17:52:15.280 回答
0

在 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",
   ***
}
***
于 2020-08-26T17:04:11.957 回答