问题标签 [webpack-dev-server]

我目前正在开发一个使用不同前端主题的应用程序。这些主题只是用户可以选择的 CSS 文件。

从技术上讲，这些主题是 .scss 文件，它们由 webpack 编译并通过 angular 中的标准链接标签加载：

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

我剥离的 webpack 配置如下所示：

在我想使用启用了热模块替换 (HMR) 功能的 webpack-dev-server 之前，这完全可以正常工作，因为 extractTextPlugin 不支持 HMR。当我简单地禁用 extractTextPlugin (options.disable) 或删除它们时，所有主题都会编译到主模块中，这 - 当然 - 会破坏主题，因为所有主题都被一起应用。

如何在不使用 extractTextPlugin 的情况下直接使用 webpack 生成这些 CSS 文件？我尝试了不同的条目/块、文件加载器等各种尝试，但没有任何效果。

它应该很简单：从 SCSS-Files 生成静态 CSS-Files，而不使用 ExtractTextPlugin 将它们转换为 JS-Files。

如果有人能指出我正确的方向，那就太好了。

我们有一个中央服务器，我们在其上托管所有开发人员的环境。我们让 nginx 运行代理对 uwsgi 应用程序服务器的请求。

我们现在已经开始使用 webpack，我们最终将为每个开发人员运行 webpack-dev-server。我想要做的是让 webpack-dev-server 在 unix 套接字上运行（这样我们就不会占用端口）并通过 nginx 将所有请求代理到这个 webpack-dev-server。

我正在查看 github 上的 webpack-dev-server 代码，并注意到它只接受主机和端口作为选项。

有没有人尝试过这样做？

我在使用 npm 时遇到问题，当我连接到我的网络时，它运行良好，但随后我断开计算机，它停止工作。当我运行任何与 npm 相关的命令时，它无法给我这个错误。有谁知道里面发生了什么？

我有一个装有 Capitan OS 的 Mackbook pro

提前致谢。

我不太确定publicPathin 的webpack作用。具体来说，output.publicPath。在 github 文档中，我看到了这个

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

Javascript/HTML 页面视图中的 output.path。

对于reactjs热加载，我有

这是否意味着构建的 webpack 文件 ( main.js) 放在了我的dev-server http://localhost:8080/public/bundle/中？

我试图让 webpack 为我的 less 而不是内联样式输出一个 css 文件。我一直在使用extract-text-webpack-plugin。

我已经根据文档进行了设置，并查看了关于 stackoverflow 的类似问题，但无法弄清楚为什么我下面的 webpack 配置文件没有输出文件或在 index.html 中放置任何内容

我正在我的 vagrant laravel/homestead 盒子上开发一个节点项目。一切正常，当我转到我的主机定义时，我可以访问该项目/etc/hosts：

但是，我正在尝试使用 webpack 构建和观看我的项目，所以我安装了 webpack-dev-server 并且可以运行它：

我的问题是，当我尝试使用浏览器访问 project:8080 时，出现加载错误。

A netstat -an | grep 8080in the vagrant 告诉我盒子正在听。我尝试使用转发端口homestead.yaml

但是不管有没有端口转发，我得到的只是一个错误页面。

我该怎么做才能让我的 webpack watcher 工作？

我在使用 webpack-dev-server 编译我的资产时遇到了性能问题。出于某种原因，webpack-dev-server 的重建速度非常慢。webpack -watch 大约快 90%。

我的 webpack 配置：

我的 webpack-dev-server 配置（使用 grunt）：

看起来 webpack-dev-server 没有正确使用它的缓存或其他东西。任何想法都会对他有帮助。

我想最好加载节点包，并且只有在不存在时才加载 bower 包。

我只会按照 Webpack 站点中的建议使用节点包，但我需要加载一个仅在凉亭中的库，https://github.com/Stamplay/stamplay-js-sdk 和 https://github.com /Stamplay/angular-stamplay

尝试使用bower-webpack-plugin

我安装了https://github.com/lpiepiora/bower-webpack-plugin

但是当我运行时webpack-dev-server -d --watch，错误会显示在 chrome 控制台中：

尝试使用 ResolverPlugin（请参阅Webpack 文档）

在 webpack.config 我添加..

但是，就像这里提到的Stamplay对象不正确！

尝试使用 CDN 和 angular-webpack-plugin

首先将脚本标签添加到index.html..

其次，在 webpack.config 中添加 externals ..

最后 ..new AngularPlugin进入pluginswebpack.config

这种方式，但我不能使用angular-stamplay，当我尝试时，模块出现错误stamplay。:(

在此处查看具有此更改的分支

完整的项目在这里：https ://github.com/Ridermansb/webpackBowerStarter

我使用 webpack 开发服务器，但无法访问我的bundle.js文件。

编辑：我正在使用这个没有bower-webpack-plugin 的webpack 配置。

包.json

webpack.config.js

索引.html

控制台输出

当我运行开发服务器时，我得到 404 Not Foundhttp://localhost:8090/assets/bundle.js

相关的 webpack/webpack问题。

根据我的经验，在你堆积一定数量的组件和/或依赖项之后，在实际项目中使用 webpack 会减慢速度。我有一个测试存储库，旨在通过以下应用程序证明这一点：

• 入口点是A.js，它需要B.js和C.js。
• B.js很小，没有很多依赖项。
• C.js是单片的，有成千上万的需求。

我的期望是，webpack-dev-server在测试项目中使用时，每当我 save 时B.js，webpack 都应该认识到这一点，C.js并且它的任何依赖项都没有被触及。它应该B.js快速编译（在 <10ms 内），在缓存中替换它，并使用初始编译A.js的缓存版本输出编译后的内容。C.js

但是，webpack3002每次保存时都会编译隐藏模块B.js，导致编译时间为960ms. 这本身还不错，但是如果您添加一些加载程序，例如react-hotand ，就会失去控制babel。

我确实有一个解决方案：在同一个测试项目上有一个dll分支。在该分支上，您可以运行webpack --config webpack.dll.config.js以从中生成两个 DLL，B.js然后C.js在编译A.js. 之后，当使用 时webpack-dev-server，无论何时保存B.js，它的 DLL 都会重新编译，A.js会注意到其中一个 DLL 已更新，它只会获取旧的 DLLC.js和新的 DLL，B.js并将它们组合成一个快速快乐的捆绑包。

我可以在那个分支上走得更远，进行目录读取或依赖图遍历，为每个组件生成一个 DLL，这种方法可能适用于每个 webpack 项目。从理论上讲，这应该使编译尽可能快。但在那一点上，在我看来，我似乎已经（糟糕地）重新实现了 webpack 中的缓存层应该自己做的事情，那么这里发生了什么？