首页 文章

Webpack-dev-server编译文件，但不刷新或使编译的javascript可供浏览器使用

提问于
浏览 次
53

我正在尝试使用webpack-dev-server编译文件并启动一个开发Web服务器 .

在我的 package.json 中，我将脚本属性设置为：

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

所以 --hot 和 --inline 应该启用网络服务器和热重新加载（据我所知） .

在我的 webpack.config.js 文件中，我设置了entry，output和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实例永远不会创建或全局可用 .

Gif of issue

我错过了什么？

javascript webpack vue.js webpack-dev-server

5 回答

  • 4

    有两件事导致了我的问题：

    module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

    这是固定的 webpack.config.js ：

    var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};
    回复于
  • 54

    经过长时间的搜索，我找到了我的问题的解决方案，在我的情况下 output path 没有正确配置 .

    这个配置解决了我的问题：

    const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....
    回复于
  • 10

    我有同样的问题，我发现除了所有这些点，我们还必须将index.html与输出bundle.js放在同一个文件夹中，并将contentBase设置为此文件夹，无论是根目录还是子文件夹 .

    回复于
  • 1

    它可能因为 ExtractTextPlugin 而发生 . 在开发模式下取消激活ExtractTextPlugin . 仅用于 生产环境 构建 .

    回复于
  • 1

    在同一个 webpack-dev-server 端口上运行两个不同的应用程序之后，这也发生在我身上 . 即使另一个项目被关闭，也会发生这种情况 . 当我改为未使用的端口时，它开始直接工作 .

    devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

    如果你像我一样使用Chrome，那么只需打开 Developer Tools 并点击 Clear site data 即可 . 您还可以通过以隐身模式运行网站来查看是否存在此问题 .

    enter image description here

    回复于

相关问题