问题标签 [webpack-4]

我正在使用 Webpack 4，我想在配置中使用 env 环境变量。我如何使用模式 --development 和 --production 获得这个变量？DefinePlugin 不起作用，文档什么也没说。

在将 webpack-dev-middle 与 express 服务器一起使用时，我想使用 webpack-hot-middleware 对提取的 css 文件进行工作（热重载）。

它适用于 webpack-dev-server。但我想将它与快递一起使用。

服务器.js

webpack.config.js

其他一切正常，当我构建时，我从 scss 获取 css 文件。我相信style-loader当它没有被提取但当我尝试它时似乎没有做任何事情时，这就是它的工作原理。

我使用 extract-text-webpack-plugin 找到了很多答案，但据我所知，这不适用于 webpack 4...所以我将 extract-loader 与 file-loader 一起使用。

我有一个看似非常简单的 Webpack 代码拆分设置，但在迁移到 Webpack 4 时遇到问题。我有两个条目，分别称为main和preview. 我想将初始代码拆分为vendor供应商模块的一个块main，但我想保留preview为一个块。

Webpack 3 中工作配置的相关部分：

具体来说，使用选项chunks中的属性CommonsChunkPlugin可以让我轻松地做我需要做的事情。Webpack 4 的optimization.splitChunks配置中是否有等价物？

当我在 NodeJs React 应用程序中使用 webpack 和 babel 时，我收到一个自动生成的错误代码：

这是 babel/webpack 自动生成的代码中的违规行：

如果我从自动生成的代码中手动删除上述行，那么错误就会消失。但由于显而易见的原因，这不是一个好的解决方案。

我正在使用 webpack 4，如package.json的摘录所示：

这是我的webpack.config.js：

我像这样构建bundle.js：

如果我保持一切不变，但使用webpack 3.11.0并卸载webpack-cli并像这样构建bundle.js ，错误就会消失：

注意：最新的 webpack 3.X 版本支持webpack.config.js中显示的 webpack 4.X 语法。

细节：

webpack-dev-middleware我有一个使用和运行我的应用程序的快速服务器webpack-dev-server。

更新到 webpack@4.1.1 后，我收到以下警告

由于我没有直接从 CLI 运行 webpack，如何设置 --mode 选项？

webpack4 bootstarp 在开发模式下的代码。

而且我的开发环境不是chrome，它不支持这些新功能。

那么我该如何解决呢？

还是我必须使用 webpack3？

有没有办法将块内容的哈希放入每个文件的文件名中，而不是整个块的哈希？

我现在正在使用这个：

但是如果我修改了 JS 文件，[chunkhash]CSS 文件的值也会改变，反之亦然。没有理由使未更改文件的缓存无效。

多年来，我一直在尝试让 CSS 源映射在 webpack 中工作，但无济于事。我不确定事情在哪里出错了。我希望有人能指出我正确的方向。

这是正在发生的事情：

行号是错误的，实际上文件名也是错误的。main.less只包含一堆@imports，实际的 CSS 在不同的文件中。

下面是我的webpack.config.js。我已经打印了它，util.inspect因为它是由许多不同的块组合而成的，我认为这样更容易阅读：

在中间的某个地方，您可以看到.less. 展开后，它看起来像这样：

如您所见，我有 3 个不同的加载器（css​​-loader、postcss-loader 和 less-loader）。它们都sourceMap设置为true，所以源映射应该带回原始源，对吗？

我在这里做错了什么？

Webpack v4 引入了两组默认值：production和development. 我的问题是：有没有办法引用配置文件中的那些？我知道我仍然可以将环境变量传递为：

通过这样做，我有两个独立的环境变量，这感觉不对。另一种选择显然是引用不同的配置文件，这看起来也不是简单配置的最佳解决方案。

我在这里错过了什么吗？

I use webpack4, Extracting css using extract-text-webpack-plugin.

It's all okay, Correct output.

Until I use optimization.splitChunks to extract the react and react-dom frameworks.

Now he can only output a css file named react, And includes all the components in the style.

I don't know why this is, how can I solve it?