Vue.js + Webpack-Dev-Server CSS URL答案

【问题标题】：Vue.js + Webpack-Dev-Server CSS URL'sVue.js + Webpack-Dev-Server CSS URL
【发布时间】：2018-08-06 18:11:51
【问题描述】：

我正在将 Vue.js 集成到一个多页 PHP 应用程序中（不是 SPA）我正在使用 vue-cli webpack 模板。我对默认模板所做的唯一修改是添加多个入口点（用于为多个页面生成多个脚本）

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

(* 我的设置图)

我的问题是从 webpack-dev-server 实例获取 CSS url。我能够在 JS 文件中链接 a-ok，并且“构建”完美地输出 JS 和 CSS 文件。我尝试在我的开发配置中添加带有文件名参数的 ExtractTextPlugin，但仍然无法从 webpack-dev 实例中获取 CSS 文件。

如果我刚刚进入 webpack，任何建议都将不胜感激

谢谢
-J

【问题讨论】：

the 'build' outputs both the JS & CSS files perfectly你的意思是问题是没有将生成的css链接到你的html？
我使用的是默认的 webpack 配置。 github.com/vuejs-templates/webpack 。正确，构建将 JS 和 CSS 分开，但是，在运行 webpack-dev-server （用于 hot-reload ）时 dev-server 暴露了 JS 链接（ IE 0.0.0.0:8080/[entry-point].js ）但是我无法使用相同的约定链接到 CSS 文件...我尝试在“构建”中使用相同的 ExtractTextPlugin，但仍然无法访问 CSS 文件..

标签： webpack vue.js webpack-dev-server

【解决方案1】：

搞清楚配置

config/vue-loader.conf.js 有一个属性extract，当设置为 true 时，会将 ExtractTextPlugin 作为最后一个加载器来输出文件。为你的 dev.conf 设置为 true

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

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

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

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

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

【讨论】：