我正在尝试使用 webpack-dev-server 编译文件并启动开发 Web 服务器。
在我的 package.json
我将脚本属性设置为:
"scripts": {
"dev": "webpack-dev-server --hot --inline",
}
所以 --hot
和 --inline
应该启用网络服务器和热重载(据我所知)。
在我的 webpack.config.js
文件中,我设置了条目、输出和 devServer 设置,并添加了一个加载程序来查找 .vue
文件中的更改:
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
publicPath: '/public',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer:{
contentBase: __dirname + '/public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
因此,通过此设置,我运行 npm run dev
。 webpack-dev-server 启动,模块加载器测试工作(即,当我保存任何 .vue 文件时,它会导致 webpack 重新编译),但是:
- 浏览器从不刷新
- 存储在内存中的已编译 javascript 永远不会提供给浏览器
在第二个项目符号上,我可以看到这一点,因为在浏览器窗口中 vue 占位符永远不会被替换,如果我打开 javascript 控制台,Vue 实例永远不会被创建或全局可用。
我错过了什么?
原文由 Chris Schmitz 发布,翻译遵循 CC BY-SA 4.0 许可协议
有两件事在这里引起了我的问题:
这是固定的
webpack.config.js
: