我的文件 struct 是:

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.config.js
package.json

我的网页包.配置.js看起来像:

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

我跑:

webpack-dev-server --content-base dist --hot

它建立起来了,而且似乎正在发挥作用.localhost:8080显示了预期的结果,但热重新加载不起作用.当我更改一个文件时,我可以在终端中看到重建正在进行,但在浏览器中什么也没有发生.配置中有什么遗漏吗?

推荐答案

当使用webpack-dev-server时,它会在内部构建所有文件,并将它们输出到输出路径中.在没有dev服务器的情况下,单独运行webpack将实际编译到磁盘.dev服务器在内存中执行所有操作,从而大大加快了重新编译的速度.

要解决热重新加载问题,请将内容库设置为源目录并启用inline-mode

就像这样:

webpack-dev-server --content-base src --hot --inline

Vue.js相关问答推荐

Select 项目后,Vuetify v-select在select后面显示数字1

在 VueJS 中为 Get、Post、Patch 配置全局标头的最佳方法

在重复内容区域中添加

使用数组元素的计算(computed)属性

如何在 Vue 中编译从外部 api 加载的模板

Vuetify 置顶工具栏

Vue:需要禁用页面上的所有输入

Vue 两种方式的 prop 绑定

Vuetify 在数据表中插入操作按钮并获取行数据

ECMA6 中 nameFunction() {} 和 nameFunction () => {} 的区别

等待来自 WDS 的更新信号

基于条件的VueJS HTML元素类型

这是 v-on:change 的正确用法吗?

Vue Cli 3 不允许我在 Webpack 中处理 SVG

更改时(change)调用函数

在子元素 vueJS.2 之间切换active类

Vue $refs 对象的类型为 unknown未知

mount() 仅在组件 Vue.js 上运行一次

在 Vue 单元测试中单击按钮时触发表单提交

如何在 vue 组件中使用 vuex?