修改

Question

我完全按照here给出了教程。但令我惊讶的是，这些文档似乎已经过时了。 e.g

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

CLI移动到一个单独的包中：webpack-cli。请安装＆＃39;的WebPack-CLI＆＃39;除了webpack本身使用CLI。 - ＆GT;使用npm时：npm install webpack-cli -D - ＆GT;使用纱线时：纱线添加webpack-cli -D

如果我安装webpack-cli并再试一次，我会看到此错误：

哈希：af9bc06fd641eb0ffd1e版本：webpack 4.0.0时间：3865ms内置   at：2018-2-26 05:10:45 1资产入口点main = main.js 1   （webpack）/buildin/module.js 519字节{0} [built] 2   （webpack）/buildin/global.js 509 bytes {0} [built] [3]   ./src/index.js 212字节{0} [built] [4] multi ./src/index.js   dist / bundle.js 40个字节{0} [已建]       + 1隐藏模块

警告配置＆＃39;模式＆＃39;选项尚未设置。组   ＆＃39;模式＆＃39;选择开发＆＃39;或者＆＃39;生产＆＃39;启用默认值   这个环境。

多个./src/index.js中的错误dist / bundle.js找不到模块：错误：   无法解决＆dist / bundle.js＆＃39; in＆＃39; / var / app / webpack_demo＆＃39; @多   ./src/index.js dist / bundle.js

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

修改

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

Answer 1

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

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

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

Answer 2

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

~~与此同时，~~您还可以阅读媒体上的相关帖子：

检查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'
}

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

配置中的警告

＆＃39;模式＆＃39;选项尚未设置。设置＆＃39;模式＆＃39;选择开发＆＃39;或者＆＃39;生产＆＃39;启用此环境的默认值。

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

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

详细了解release notes & changelog

Answer 3

遇到同样的问题，经过一些研究后发现问题有待解决，你可以在Github thread上看到

其中一个选项：

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

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

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

但是当你运行npm run build时，它会为你提供缩小的捆绑

Answer 4

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

这里是我的样本仓库，您可以将其作为从webpack 3迁移到4的参考。

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

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

Answer 5

在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入门的问题

修改

5 个答案: