问题标签 [webpack-2]

我对 webpack 完全陌生（从那时起就一直在使用 gulp）。

但是，我刚刚决定使用 webpack。决定使用 webpack 2（目前为 2.1.0-beta.20）。一直在寻找，仍然无法完成一个简单的任务，例如“给 webpack 我的bootstrap.scss文件（它会导入所有其他需要的引导程序部分 scss 文件）并返回bootstrap.custom.min.css和bootstrap.custom.min.css.map”。

我有我自己的bootstrap.scss文件，它只从引导程序中导入我需要的东西（而不是全部使用），但是在custom-variables.scss顶部导入了一个自定义文件之后，覆盖了一些默认的引导程序变量——比如颜色、网格列等。无论如何，我确定这不相关...问题是使用自定义输出文件名和源映射进行编译scss。css

并不是说它会有所作为，但首先，这是我的习惯bootstrap.scss：

除此之外，我也有我自己style.scss的，我需要做同样的事情（返回style.min.css和style.min.css.map）。

至于我的webpack.config.js文件，这就是我所拥有的：

这些是我安装的所有相关软件包：

如果我使用 <2.x 的 extract-text-webpack-plugin 版本，则会出现其他错误，它与 webpack 2 不兼容。

所以，上面代码中的小步骤......只需尝试至少获取我的bootstrap.scss并style.scss转换为 2 个单独的 css 文件：bootstrap.custom.min.css并且style.min.css（还不知道如何处理源映射）。

这就是我在搜索谷歌并尝试遵循一些示例后所能想到的。没有可靠的教程可以让我了解如何使用 webpack 来完成我需要完成的工作。我只是在这里猜测，蒙着眼睛。

但是当我webpack在控制台中输入并按 Enter 时，我没有得到任何 css 文件，而是得到以下 3 个文件：

1. bootstrap.css- 与源内容完全相同 bootstrap.scss，就像它只是将文件内容复制过来，而不是将 scss 编译为 css；
2. bootstrap.custom.min.js其中有一堆javascript代码；
3. style.min.js- 其中也有一堆 javascript 代码。

我被困在这里好几天了，甚至没有得到我需要的所有其他东西（源地图和我为 css 文件和 css.map 文件选择的目标文件夹）。

我有一个使用 Webpack2 和 TypeScript 开发的开源项目。

出于某种原因，我的开发服务器启动并且一切顺利，但是，当我更改文件时，服务器重新加载正常但永远不会更新。它在手动和自动刷新时执行此操作。

版本

配置

项目在这里：https ://github.com/swimlane/angular2-data-table

尝试了无数种不同的选择并得到了相同的结果。谢谢！

我正在尝试将名为 wijmo 的第 3 方组件库与 Angular 2 一起使用。尽管 SystemJS 给我们带来了无穷无尽的麻烦，但我们让它工作了。我很高兴看到 angular-cli 正在迁移到 webpack，并且示例项目很快。

问题是 wijmo 似乎只包含一个缩小的文件，用于它们的 angular 2 组件，并且将它们添加到 angular-cli 会引发一个错误，即“系统”未定义，因为不再使用 SystemJS。有什么方法可以将缩小的 SystemJS javascript 文件与新的 angular-cli 或 webpack 2 一起使用？

导入和使用看起来像这样，并且智能感知可以工作，因为我们.d.ts在项目的节点模块中有文件：

我天真地以为我可以破解 angular-cli 并在配置中添加一个外部，但后来我得到“系统未定义”错误：

这是我的生产 webpack 配置。标题中的两个引号分别指的是 webpack2 和 webpack。两者都为我挂起类似的错误。

这是我触发构建的命令

set NODE_ENV=production && webpack --config config/webpack.config.prod.js --progress --display-error-details

我错过了什么？

这是运行后npm run pack与我的生产 webpack 构建相关的输出：

运行使用 webpack 2 构建的应用程序时，会在 chrome 中检测到源映射，但不会加载原始源。我正在使用 webpack beta21。

这些文件过去是自动检测的，即当在 webpack js 文件的输出中放置断点时，源视图将跳转到 webpack 的原始源输入。但现在我被这个屏幕卡住了：

配置：

我和我的团队正在尝试将我们的代码库升级到 Webpack 2，但我们遇到了这两个错误：

'使用类装饰器时需要未捕获的反射元数据填充程序'和'无法读取未定义的属性'isDefaultChangeDetectionStrategy''

我们正在使用angular2-webpack-starter，使用 RC5 是最新的，并且正在尝试进行此更新。

我们认为错误来自 polyfills.browser.ts 文件，其中我们有以下代码：

此外，我们在 module.exports 中的 webpack.common.js 入口 obj 看起来像这样：

任何帮助是极大的赞赏！

我在 package.json 中构建脚本为

但是我在构建任务时遇到错误。

这是整个代码

你知道我在构建任务中缺少什么吗？

谢谢

我已经整理了一个非常基本的 webpack 2 构建，但是对于项目大小来说似乎很慢。我想要的三件事是：

1. 分块（js & scss）
2. SCSS 编译
3. 摇树

Webpack 似乎是能够做这些事情的一个不错的选择。我一直在使用 Gulp 和 Rollup，但是树抖动旁边的 SCSS/Chunking 是一件好事。

编译构建大约需要 4000 - 5000 毫秒，这不会是世界末日，除非项目是如此之小，所以我担心随着项目的增长会变得更大。

我尝试了一些方法来提高速度。

这确实有帮助，将时间减少了几百毫秒，这很棒。我试图通过解析别名来进一步解决这个问题，但据我所知，这并没有真正显示出任何收益。

我也将 devTool 设置为 eval 。除此之外，我还没有真正能够改进事情，但我确信这是我设置的方式。值得注意的是，虽然 'webpack' 会编译构建，但运行 webpack-dev-server 不会。它启动，挂起编译然后崩溃。这可能是也可能不是一个单独的问题，但我认为值得包括在内。

我还使用 ES6 System.import 进行分块（仅作为注释）。

我把项目放在了 git 上，所以随意把它拉下来：https ://github.com/loriensleafs/trying-out-webpack2

webpack.config.js 是：

感谢人们对此的任何建议/帮助。如果我可以在这里发布任何其他有用的信息，请告诉我。

我正在尝试通过应用摇树技术来减小我的 angular 2 应用程序的大小。

我正在使用webpack 2.1.0-beta.22,angular 2 rc6和typescript 2.0.2.

这是我的 tsconfig.json：

webpack.config：

摇晃前的捆绑包大小约为 1.7MB，摇晃后的大小约为 1.8MB。

我做错了什么？

我对 Angular 中的延迟加载感到困惑。我使用 webpack2 和 angular2 rc5。当我尝试导航到 +lazyload 组件时，它失败了

我的 app.modules 是这样的：

应用程序路由

pages.modules

pages.routing

存储库.模块

存储库.路由

存储库.component

search.module 之类的

导出类 SearchModule {}

我正在尝试在 NavigationModule 中使用路由并从 DOM 中丢失 SearchModule。怎么了？