问题标签 [webpack-3]

对于一个新项目，我必须只保留 webpack，因此需要找到一种方法来有效地编译我们的样式表。基本上以一种非常gulh-ish的方式：

• 收集所有较少的文件，包括像这样的全局模式src/**/*.less（css顺序可能是任意的）
• 还允许导入 css 文件，例如，say../node_modules/vendor/**/*.css或3rdparty/master.less
  • （如果我必须为此设置一个bogus.js入口点，那很好......）

所有这些，一个典型的 gulp 工作流程：

• 将 less 转换为 css
• 合并（concat）less和css
• 已经cssnano完成了优化工作，具有特定的 css nano 选项，例如orderedValues: false, normalizeWhitespace: true...
• 写styles.css为最终输出

而且当然：

• 让源地图在该链中存活一段时间styles.css.map
• 高效的观察和通常的惰性/增量编译（如gulp和webpack 所拥有的）

我不需要的是css modules（cssimported进入节点模块以供“范围”使用，作为散列范围选择器出现......）

如何在 Webpack 中完成“典型的”less|css 处理工具链？

这个 SO 问题是我的第一次尝试，在组合后我在中间陷入了配置地狱......

到目前为止的考虑（有用与否）

我知道，对于 webpack，包括 css 甚至字体和图像在内的任何资源都是一个“模块”......而不是将我的 css '模块'与实际的 js 合并（只是稍后再煞费苦心地再次将它们分开），它可能是更明智的是，有一个cssstub.js并行入口点——也称为多编译器模式。

但这确实是我的智慧结束的地方......在 webpack 中的一组文件上执行一系列 $things 似乎真的很难（除非它是一个连接的 javascript 模块图）。我确实在 globbing 上找到了一些东西，但这还不够（合并 css，cssnano，......）而且大多数情况下我根本无法将这些碎片粘合在一起......

这是我的 css webpack 配置

{ test: /\.css$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } }, { loader: 'postcss-loader', options: { sourceMap: true, // https://github.com/postcss/postcss-loader/issues/92 // https://github.com/postcss/postcss-loader/issues/8 plugins: () => [ precss(), postcssImport({ addDependencyTo: webpack }), postcssNested(), postcssCssnext({ browsers: ['last 2 versions', 'ie >= 9'], compress: true, }), ], }, }, ], }

而且我正在使用 Webpack 3，如果我触摸一个 @import 的 css 文件，热加载功能将不起作用，人们建议我将其放在postcssImport({ addDependencyTo: webpack })插件的第一行，但如果我放在 precss 之前，我得到了编译错误。

我想知道上述配置是否有任何问题，不胜感激。

您可以在此 repo 中重现该问题

https://github.com/iroy2000/react-redux-boilerplate。

我正在将 webpack(3.6.0) 用于同构反应应用程序，并且除了我的 css 文件中的背景图像外，一切正常。所有其他样式都有效，图像正在按预期在我的本地计算机上输出到我的 /dist 文件夹，如果我检查，我会在 localhost 的浏览器中看到正确的文件路径......但是如果我去开发工具中的源/dist/client 下这些静态文件的整个目录丢失。我正在尝试找出同构渲染，所以老实说，我对服务器与客户端渲染舞蹈方面发生了什么只有一点了解，而且我承认我的头脑并没有完全围绕 webpack 配置。到目前为止能够解决我的问题，但这让我真的很难过，任何见解都将不胜感激！

计算机 /dist 文件夹：

浏览器来源（测试 w/chrome）：

目标 DOM 元素背景样式：

webpack.config.js（客户端）：

webpack.config.server.js（服务器）：

css 文件：

我有一个从这个存储库开始开发的项目。我没有用他们的更新来更新我的应用程序，这是我应该做的，但我会根据我对新版本的需要来更新库。大约两周前，我更新了我的应用程序，包括他们的所有更新。我合并了所有冲突并修复了错误，直到一切按预期工作。

在该存储库中，他们更新到 webpack 3 并开始使用 dll 作为在开发过程中更快地构建应用程序的一种方式。我的问题是我无法构建我的 dll，我得到的错误是：Error: DllPlugin: supply an Array as entry. 这是一个最小的存储库https://github.com/hyalkaf/DLLPluginError，它是他们的 repo 的副本，但有一个额外的窗口。这个最小的 repo 没有太多额外的代码，除了几行来创建一个额外的窗口。

为了给出这个错误的上下文，这里是我认为在最小 repo 中相关的文件。

webpack.config.base：

webpack.config.renderer.dev.js

webpack.config.renderer.prod

然后我有一个额外的 html 文件，名为 worker.html 以及 app 目录下的 worker.js。我还在 main.dev.js 文件中添加了一个新窗口。

要重现错误，请 fork 或克隆 repo 并运行：npm run build-dll

可能/可能相关的 Github 问题：

1. https://github.com/chentsulin/electron-react-boilerplate/issues/1199

所以最近，我从 React 15.4.2 迁移到了 React 16.0.0。这是我在项目中的当前版本：

随着 React，我迁移到 Enzyme 3.6.0 并开始使用enzyme-adapter-react，所以在我的测试入口文件中(src/config.test.js)我这样做了：

当我尝试像往常一样运行测试时jest，我得到了标题中的错误。

另外，如果我尝试使用jest-enzyme并将其添加到我的笑话配置中：

我得到另一个错误：

TypeError：超级表达式必须为 null 或函数，而不是未定义。

所以我有点卡住了，无论我尝试什么，我都无法让我的测试工作。任何帮助表示赞赏。

我遇到了奇怪的情况。我相信这个问题与 React Router V4 配置有关。

我正在使用react-router-modal和React Router v4。使用react-router-modal组件，我呈现一个指向具有自己唯一 URL 的模式窗口的链接。单击模态的链接后 - 模态将打开并将 URL 添加到地址栏。因此，我什至可以使用以下 url 从新选项卡访问模式窗口：http://localhost:8080/modal_1URL 这对我来说非常重要。

在开发模式 ( npm start) 下，一切正常，一旦输入无效 URL，页面就会重新加载，无效 URL 仍保留在地址栏中。（不是最好的情况）

我认为一切都会像在生产环境中一样工作。但是这里有一个问题。将最终构建上传到远程服务器或本地主机后，我会收到以下错误：
1. 输入无效 URL 后 - 我收到 404 Not Found
2. 一旦我尝试使用直接 URL 访问模式（未在加载页面中单击） ) http://localhost:8080/modal_1- 404 未找到

没有上传.htaccess

index.js非常简单，整个应用程序是一个包含各种组件的页面：

组件使模态看起来像：

和webpack.config：

我正在处理一个webpack配置文件，我觉得我要么缺少一些基本的东西，要么完全误解了我认为的webpack. 我有一个非常基本的webpack.config.js文件，如下所示：

如果我使用这个文件，我会得到一个 18.8Mb 的包。如果我使用webpack-bundle-analyzer，我会到处看到大量重复。为了让它将所有常见的东西组合到一个单独的附加包中，我尝试使用CommonsChunkPlugin如下：

这样，包仍然是 18.8Mb，并且生成了一个 5.79kb 的通用包。没运气。然后我尝试明确命名我想放入公共包中的位：

现在我得到了两个包，一个是 18Mb，另一个是 2.95Mb（总共 20.95Mb）。所以仍然没有朝着正确的方向前进。但是，如果我仔细检查并尝试发现我认为重复最多的模块并为它们定义一个分辨率别名，例如，

现在，我得到了一个只有 6.1Mb 的捆绑包。现在我意识到 6.1Mb 仍然很大（此时我没有运行生产优化webpack），但它是原始包大小的 1/3，所以这是一个巨大的胜利。但令我失望的是，我不得不手动检查并找出重复的模块是什么。我认为整个观点的一部分webpack是它会为我做这件事？

通常，诸如此类的东西react在各种包中被标记为对等依赖项。但我知道至少有一个three被列为依赖项（不是对等依赖项）。这会影响这一切吗？如果是这样，那么问题是对于该特定模块，我不确定将其标记three为对等依赖项是否有意义，因为无法真正预测在应用程序级别将其添加为依赖项是否有意义。

底线是我怀疑我做错了什么。我想解决这个“正确的方法”，以便webpack可以自动执行此操作。但我不确定为什么它坚持复制这些包。我正在使用webpack3.6.0，顺便说一句。

感谢您的任何建议。

面对 React/Typescript 设置的奇怪问题。

在 OSX/Windows 上运行webpack -p编译得很好，TypeScript/TSX 编译器完全没有错误。

但是，在 Ubuntu 上，它会抛出一个 TypeScript 特定的错误，特别是：

ERROR in [at-loader] ./src/scenes/Component.tsx:5:23 TS2307: Cannot find module 'History'.

引发错误的特定行是：

import {History} from "History";

package.json具有用于 History 的 normal 和 @types 包：

"@types/history": "4.6.0",

"history": "4.7.2",

同样，我可以webpack -p在 OSX 上使用完全相同的代码、相同的 webpack 配置和相同的版本运行而不会引发错误。过程是一样的！但是，在 Ubuntu 上，构建将失败并出现上述错误。

我在 package.json 中有这个模块

`

我的 js 包正在工作，但我无法将样式编译为 1 个包。main.bundle.css。这是我的 webpack.config.js

当我启动 webpack 时，我没有任何错误，我的 js 包正在工作，但 css 没有。我该如何解决这个问题？

假设我将一些 JS 资产编译到 dist/static/js：

在运行之前，npm run build我在 /dist/、/static/ 和 /js/ 中创建了一个文件。

运行后npm run build 这个文件被删除了。在 /static/ 和 /js/ 中创建的那个已经消失了。我该如何预防？

我正在使用 Vue.js/Webpack 样板： https ://github.com/vuejs-templates/webpack