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

Question

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

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

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

所以qazxsw poi和qazxsw poi应该启用Web服务器和热重载（据我所知）。

在我的--hot文件中，我设置了入口，输出和devServer设置，并添加了一个加载器来查找--inline文件中的更改：

webpack.config.js

所以通过这个设置，我运行.vue。 webpack-dev-server启动，模块加载器测试工作（即当我保存任何.vue文件时，它会导致webpack重新编译），但是：

• 浏览器永远不会刷新
• 存储在内存中的已编译的javascript永远不会被浏览器使用

在第二个项目符号中，我可以看到这一点，因为在浏览器窗口中，vue占位符永远不会被替换，如果我打开javascript控制台，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'}
        ]
    }
};

我错过了什么？

Answer 1

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

npm run dev

这是固定的：

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'}
        ]
    }
};

Answer 2

我将把我自己的特殊故事Webpack index.html添加到这里的痛苦之墙。

我之前在跑步

webpack-dev-server

为了构建一个Typescript项目。已编译的--watch文件将更新，但浏览器看到的捆绑包不会。所以我基本上和OP一样。

我的问题归结为webpack --watch 参数。构建配置的原作者已将.js设置为过滤器函数，结果证明该参数不是该参数的有效值。用适当的watchOptions.ignored替换过滤器功能让ignored构建再次为我工作。

Answer 3

您的项目树不清楚，但问题可能在contentBase设置中。尝试设置contentBase：__ dirname

Answer 4

经过长时间的搜索，我找到了我的问题的解决方案，在我的情况下，输出路径未正确配置。

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

webpack.config.js

Answer 5

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

Answer 6

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

Answer 7

在同一个

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'}
        ]
    }
};

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

const path = require('path');

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

如果你像我一样使用Chrome，那么只需打开webpack-dev-server并点击

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

。您还可以通过以隐身模式运行网站来查看是否存在此问题。

Developer Tools

Answer 8

正确的解决方案

告诉Clear site data观看选项提供的文件。

默认情况下禁用它。

启用后，文件更改将触发整页重新加载。

例：

dev-server

Answer 9

不知何故，对于我的情况，删除“--hot”使它工作。所以，我删除了devServer.watchContentBase

webpack.dev.js

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};

webpack.common.js

hot: true

Answer 10

我的情况是我已经深入尝试了Webpack功能，但完全忘记了我整个时间都设置了注入是假的......

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    publicPath: '/js/',
    contentBase: path.resolve(__dirname, 'docs'),
    watchContentBase: true,
  }
});

切换那是我的票。

Answer 11

我遇到过类似的情况，

  output: {
    path: path.resolve(__dirname, 'docs/js'),
    filename: '[name].min.js',
    library: ['[name]']
  },

正在服务我的

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

文件，但没有更新。在阅读了几篇文章后，我意识到webpack-dev-server不会生成新的js文件，而是将一个文件注入index.html。

我将webpack-dev-server添加到我的应用程序中，并在我的index.html文件中使用以下配置：

html-webpack-plugin

然后，我在webpack.config.js中注释了引用我的条目js文件的脚本标记。我现在可以在没有任何额外标志的情况下运行

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

，我的文件的任何更改都会立即显示在浏览器中。