我有一个通用文件common.js需要一个 jQuery 插件作为异步块。

并且 webpack 可以生成一个chunk.common.js并且chunk.select.js它会在需要时加载chunk.common.js然后加载。chunk.select.js

但我的问题是每次我base.js都编辑chunk.common.js和chunk.select.js编译。我怎样才能制作chunk.select.js一个不应该每次都编译的通用块。

我的 webpack 配置是这样的

我是 webpack 的新手，我没有找到一种方法将我的供应商库从 node_modules 及其依赖项（订单和主文件 [js，css]）加载到单独的包文件中。
我曾经使用 bower_components，但根据这个文档，我搬到了 npm。

例子

我的系统中有角度材料，它取决于角度和他自己的 css 文件（angular-material.css）。

我已经尝试了什么

我使用了webpack.optimize.CommonsChunkPlugin，它确实加载了 venodors js 文件，但是按照我在配置文件中输入的顺序（请参阅下面附加的配置文件），所以如果我在 angular 之前放置 angular 材料，则运行将失败。

我尝试将解析对象配置为从“bower.json”中读取，其中配置了主文件描述和依赖项，但效果不佳。

我的配置文件

我想达到什么

Webpack 将生成 2 个包：

• vendor.bundle.js - 包含所有供应商主 js 文件的文件，加载顺序正确。
• app.bundle.js - 一个包含我所有应用程序内部文件的文件。
• vendor.bundle.css - 包含所有供应商主 css 文件的文件

两个供应商捆绑包都应与 bower.json 依赖项中的定义相同。
我的 Webpack 版本是 2.1.0-beta.25

现在我正在将我当前的项目从Webpack 1to移动Webpack 2，我遇到了一些以前运行良好的 css 模块问题。特别是，我使用css-loaderand react-css-modules。我目前的开发配置如下：

它工作正常。对于生产，我使用ExtractTextPlugin（版本 2.0.0-beta.4），我的 Webpack 配置是这样的：

在这种情况下，构建失败并出现以下错误：

所以它似乎没有预先添加本地前缀。文档中也提到了css-loader：

注意：对于使用 extract-text-webpack-plugin 进行预渲染，您应该在预渲染包中使用 css-loader/locals 而不是 style-loader!css-loader。它不嵌入 CSS，只导出标识符映射。

所以我尝试了 loader: 'css-loader/locals' 并将其添加到选项中，但不幸的是，没有任何效果。

我也尝试用 postcsspostcss-modules插件解决这个问题。它修复了构建，但是当我尝试启动我的应用程序时，它看起来没有适当的 css 名称映射导入。

在 webpack 1.x 中，我可以在我的 webpack 配置中使用 eslint 属性来启用自动修复我的 linting 错误，方法是：

然而，在 webpack 2.x 中，到目前为止我一直无法使用自动修复功能，因为我不知道在我的 webpack 配置中设置它的位置。在我的 webpack configFile 中使用 eslint 属性会抛出一个WebpackOptionsValidationError.

在阅读了大量 SO 问题（以及在线研究）之后，我仍然无法使用 Webpack 2（v2.1.0-beta.27）、ExtractText 插件（v2.0.0-beta）生成 CSS 文件（其中包含 CSS） .4)、sass-loader (v3.2.0)、css-loader (v0.26.1) 和 style-loader (v0.13.1)。

目前，Webpack 2 成功完成并按预期生成了我的 JS 文件，但我的app.css文件是空的（Chrome 会为该文件抛出 404）但根据我在 Chrome 中的 Sources 面板在正确的位置生成。这使我相信存在与css-loader其他装载机有关的问题。

我当前的webpack.config.js文件如下所示：

我的webpack.style.js文件如下所示：

我的文件结构看起来像这样（这是正确的）：

在尝试迁移到 Webpack 2 之前，一切都按预期工作。唯一改变的是与 Webpack 2 升级有关，所有文件路径和我使用的加载器都是相同的（升级版本除外）。

这就是 Webpack 1 中重要部分的样子（我在上面的这个例子中去掉了 postcss-loader）

最终我想在其中创建 1 个 CSS 文件/secured_assets/css/app.css，其中包含我require在webpack.style.js. 此时，我没有收到任何错误，app.css也没有内容，我在我的网络面板中看到 404（尽管它显示在 Chrome 的源中）。

更新

当我简单地运行它时，它会正确webpack --config ./webpack.dev.js创建我的。app.css当我运行webpack-dev-server --config ./webpack.dev.js它没有。所以看起来是一个可能的 webpack-dev-server 问题......

我正在尝试配置代码拆分

• 角度 1.5
• 打字稿 2.x
• 网络包 2

基本设置：我使用 vscode typescript 编译器将 ts 文件编译到与源文件夹具有相同文件夹结构的输出文件夹。

webpack 入口点是 testapp\testapp.js 其中包含

目前，pageonecomp.ts 也没有 pagetwocomp.ts 使用 myservice.ts 中的任何内容。当我编译并运行 webpack 2 时，它显示：

这正是我想要的，0.bundle.js 包含 MyService，testapp.bundle.js 包含 pageonecomp、pagetwocomp 和 testapp angular 模块。

但现在我想使用从 pageonecomp.ts 中的 myservice.ts 导出的 MyService 类型。为了使打字稿能够在 MyService 类上提供代码完成，我需要在 pageonecomp.ts 中导入 MyService 类型：

但是当我现在运行 webpack 时，代码拆分不再起作用，从输出中可以看出：

MyService 类现在包含在 testapp 包中，我不想要它......

有谁知道如何使它工作？目标是让 webpack 仅根据 import 语句创建我的包，以确定包中应该包含的内容，并让 System.import 指定应该在哪里进行代码拆分。

注意：目前我不需要动态加载额外的角度模块，我只是试图为多个入口点（多个小型水疗中心）制作捆绑包，以及在这些水疗中心之间共享的几个常见捆绑包。

这是我的项目文件夹：app

• 开发工具
  • 节点模块
  • 包.json
  • webpack.config.js
• 源代码
  • 模块（文件夹）
  • main.ts
  • 索引.html
• 距离

webpack.config.js：

main.ts：

当我尝试构建我的项目时，我收到此错误：

我在这里做错了什么？此外，更改文件夹结构也不是解决方案。我需要找到一种方法使其按原样工作，而无需修改从main.ts.

据我所知，我的解析有问题，webpack.config但我不知道出了什么问题以及为什么它不能解析我的模块路径。

谢谢你。

我正在尝试使用 sass-loader 将 Foundation 与 Webpack 2 一起使用。

我正在导入 Foundation

并因为找不到基础而出现导入错误。阅读 sass-loader 的文档表明我应该实际使用：

这修复了导入错误，但产生了一个新问题。

我收到的错误是

ModuleBuildError in Module build failed: @import "normalize"; ^ 未找到或无法读取要导入的文件：规范化

要导入的文件未找到或不可读：规范化父样式表：... /node_modules/foundation-sites/scss/foundation.scss in ... /node_modules/foundation-sites/scss/foundation.scss（第 9 行，第 1 列)

在我的 webpack 配置文件中，我还使用了 ExtractTextPlugin，如下所示：

我相信这来自 webpack 出于某种原因没有解析到 node_modules 文件夹，但不确定原因来自哪里。

使用这个webpack.config.js：

有这个结构：

这index.js：

并且Courses.jsx：

并且CourseList.jsx：

运行时webpack，我收到此错误：

将我的.jsx文件扩展名重命名为.js它时有效。

我想设置我的项目，所以无论何时我使用下面的行：

决定：

./dist/blahblah/core/BlahBlahService

我已经阅读了在线资源并应用了指示设置（我也包括在下面）。这在 Visual Studio Code 中工作；即它没有向我显示错误，因此它能够正确读取我在 tsconfig 中的设置并理解它。我想让同样的事情发生在 Webpack 上。

但是我收到以下错误：

./xxxxxxxxxxx.ts 中的错误找不到模块：错误：无法解析“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”中的“@blahblah/core/BlahBlahService”

我的 Web 应用程序中有以下设置：

• 角 2 版本 2.2.0
• 打字稿版本 2.0.8
• Webpack 版本 2.1.0-beta.26
• 真棒打字稿加载器版本 2.2.4

我的 tsconfig 中还有以下内容：

我的 webpack.js 文件中有以下设置：