开始使用 webpack 4 的问题

Posted 2023-02-22

【中文标题】开始使用 webpack 4 的问题

【英文标题】：Issues with getting started with webpack 4

【发布时间】：2018-08-05 12:22:36

【问题描述】：

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

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

CLI 移到了一个单独的包中：webpack-cli。请安装 'webpack-cli' 除了 webpack 本身使用 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] 多 ./src/index.js dist/bundle.js 40 字节 0 [内置] + 1 个隐藏模块

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

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

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

编辑

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

【问题讨论】：

看起来文档仍然停留在 webpack 3

做一些研究，也许尝试压缩你的问题。例如，警告不会导致您的问题。 codementor.io/valentino/…

@DaveKaye ，你的 cmets 没有任何意义，文档应该反映 webpack 的最新更改，否则会误导和浪费时间，特别是对于初学者。甚至他们也没有提及文档所针对的版本。

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

配置页面还是没有mode，现在是4.5.0 :)

【参考方案1】：

很快就会更新，详情见this链接

我们即将完成迁移指南和 v4 Docs Additions！要跟踪进度或提供帮助，请访问我们的文档存储库，查看下一个分支并提供帮助！

【参考方案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 时，它会给你一个缩小的包

【参考方案3】：

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

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

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

【参考方案4】：

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

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

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

有一个专门针对迁移的提交。看看那个以获取更多信息。

【参考方案5】：

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

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

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

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

---

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

npm 脚本中的 CLI 用法：

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

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

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

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

配置中的警告

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

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

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

阅读更多release notes & changelog

【参考方案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",
   ***

***