Vue.js + Webpack-Dev-Server CSS URL＆＃39; s

Question

我将Vue.js集成到多页PHP应用程序中（非SPA） 我使用的是vue-cli webpack模板。只有对默认模板进行的修改才是添加多个入口点（用于为多个页面生成多个脚本）

对于我的开发环境，我使用docker-compose并通过我的灯栈服务页面，并在单独的实例上运行Webpack-dev-server并链接webpack-dev-server生成的JS文件。

（*我的设置图）

我的问题是从webpack-dev-server实例获取CSS url。 我能够在JS文件中链接一个好的，以及＆＃39; build＆＃39;输出JS＆amp; CSS文件很完美。我尝试在我的dev配置中添加带有文件名param的ExtractTextPlugin，但仍然无法从webpack-dev实例中获取CSS文件。

任何建议都会非常感激，因为我刚刚进入webpack

感谢
-J

Answer 1

找出配置

config / vue-loader.conf.js在设置为true时具有属性extract，将ExtractTextPlugin添加为输出文件的最后一个加载器。对dev.conf

设置为true

然后，在您的开发配置中，将ExtractTextPlugin添加到您的插件堆栈，并添加您要将文件作为源文件的filename约定。

注意：您还需要将devServer配置上的公共路径配置为您的容器{host}：{port}

我已经分叉了源模板并添加了参考/使用的配置

https://github.com/ibejohn818/vuejs-webpack-docker

希望这有助于某些人，因为我可以将其视为一个常见的用例，并且在经过几天的谷歌搜索后无法找到任何确切的参考。