似乎在 webpack 中找不到任何调试选项或插件来显示块中的确切内容。

为什么我需要这个？我注意到代码拆分实际上使所有内容都变得更大然后只是将所有内容粘贴在单个文件中的情况。这有点违反直觉，因为我不相信 webpack 的引导代码有那么重要；我怀疑这可能是缩小/重复数据删除，但是在不知道哪些模块实际上被分块在一起的情况下，很难进行一些孤立的测试来确认。

我的构建过程使用 gulp；如果这有什么不同的话。

我正在使用一个内部有一个 css 文件的节点库，该 css 文件会加载这样的图像

在http://localhost:9000/ （根目录）请求的文件“image.png”很脏，无法在项目的根目录中放置图像。

另外我还有另一个问题，我不知道为什么模块的图像文件没有自动复制到构建文件夹，只有当我手动将图像文件复制到构建文件夹时才有效。使用 Webpack 配置参数，我得到了将图像复制到根目录的功能，但它给它们添加了随机名称，我不希望它们在根目录中。

我希望将所有加载的图像复制到 build 文件夹内的“img”子文件夹中，并使用它们的原始文件名，并在那里请求，因此根目录不会被那里的所有文件弄脏。

这是我的 webpack 配置文件：

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

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的详细描述，可能会有所帮助

在 webpack 3 配置中，我将使用以下代码创建单独的vendor.js块：

有了所有的更改，我不确定如何使用 Webpack 4 来实现。我知道它CommonChunksPlugin已被删除，所以有一种不同的方法可以实现这一点。我也阅读了本教程，但我仍然不确定提取运行时块和正确定义output属性。

编辑： 不幸的是，我在这里遇到了最受欢迎的答案的问题。看看我的回答。

这篇文章webpack 4: mode and optimization似乎建议将 whenmode设置development为devtool设置为eval.

我期待这会触发源映射生成，但在or模式下运行webpack-4-quickstart会导致不生成源映射。developmentproduction

如何使用 webpack 4 生成源地图？

我安装了最新版本的 webpack：

然而，当我webpack在终端中运行时，我得到以下信息：

我的应用程序使用 NODE_ENV 来决定应该向哪个 api 服务器请求。

我想使用 mode="production" 构建暂存包，但保留 NODE_ENV="staging"。

我尝试使用下面的配置进行构建，但 bundle.js 变成了 NODE_ENV="production"。

如何使用 Webpack 4 在开发模式下自动重新加载应用程序？目前，我尝试了这个脚本，但它不起作用：

我正在使用RxJS 5.5并且正在导入运算符，例如：

由于我升级了 webpack 3 -> 4，我看到整个rxjs包被导入：

似乎 webpack 中的别名配置不再起作用：

我正在使用 webpack 4 并最终修复了我所知道的 cli 部分，但是现在当我运行时，我在webpack下面得到了这个错误。

这是堆栈跟踪：