问题描述:在使用 webpack-dev-server 插件时,在 package.json 的 scripts 中 添加好serve后,运行 npm run dev 后,改变源码,对应的样式并不改变,但是 webpack-dev-server 插件运行没有问题。
问题出现原因:我们可以在执行 npm run dev 后,看到控制台打印出如下信息:
Project is running at http://localhost:8080/
项目正在运行在 http://localhost:8080/,因此我们需要在浏览器上输入 http://localhost:8080/
webpack output is served from /
webpack 输出在 / 目录下,当我们在 浏览器上输出 http://localhost:8080/bundle.js 发现,
js代码的确存在
这是因为 webpack-dev-server 插件,把生成的文件,不会直接存在 本地磁盘上,会直接存在内存中。因此,我们不能直接在html文件中引用本地 dist 中,打包好的文件,需要改变路径。
解决办法:
1.把项目在 http://localhost:8080/ 上运行;
2. 改变 html文件中引用的js文件的地址
<script src="/bundle.js"></script>