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

Question

我正在尝试使用 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 永远不会对浏览器可用

在第二个项目符号上，我可以看到这一点，因为在浏览器中 window vue 占位符永远不会被替换，如果我打开 javascript 控制台，Vue 实例永远不会创建或可用全球。

我错过了什么？

Answer 1

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

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

Answer 2

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

Answer 3

经过长时间的搜索，我找到了问题的解决方案，在我的例子中，输出路径配置不正确。

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

const path = require('path');

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

Answer 4

这可能是因为 ExtractTextPlugin。在开发模式下停用 ExtractTextPlugin。仅将其用于生产构建。

Answer 5

在运行两个不同的应用程序在同一个 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。您还可以通过运行处于隐身模式的站点查看是否是问题所在。

Answer 6

不知何故，就我而言，删除“--hot”使其有效。所以，我删除了 hot: true

webpack.dev.js

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

webpack.common.js

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

Answer 7

我的情况是，我对 Webpack 功能进行了如此深入的试验，但完全忘记了我一直将 inject 设置为 false，就像这样...

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

打开它是我的票。

Answer 8

正确的解决方案

告诉dev-server 观看 devServer.watchContentBase 选项提供的文件。

It is disabled by default.

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

示例：

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

Answer 9

我遇到了类似的情况，其中 webpack-dev-server 正在为我的 index.html 文件提供服务但没有更新。阅读了几篇文章后，我意识到 webpack-dev-server 不会生成新的 js 文件，而是将一个文件注入 index.html.

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

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

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

然后我在index.html中注释掉了引用我的入口js文件的脚本标签。我现在可以运行 webpack-dev-server 而无需任何额外的标志，并且对我的文件所做的任何更改都会立即显示在浏览器中。

Answer 10

我会把我自己关于 Webpack 的特殊故事添加到此处 --watch 苦难之墙。

我是运行

webpack --watch

为了构建 Typescript 项目。编译后的 .js 文件会更新，但浏览器看到的包不会。所以我基本上和OP处于相同的位置。

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

Answer 11

您的项目树不清晰，但问题可能出在 contentBase 设置中。尝试设置 contentBase：__dirname

Answer 12

我的开发服务器也有问题，它停止工作了。以前它是有效的，然后我添加了大量的额外功能来获得生产版本。然后当我回到 devserver 时它不再工作了。

进行了大量调查 - 最终从 git 中的先前提交开始，然后逐个重新引入更改，直到我弄清楚。

原来这是我对 package.json 所做的更改，特别是这一行：

  "browserslist": "> 1%, not dead",

这对于指导 postcss 关于目标浏览器很有用。

但是，它会停止 devserver 的工作。解决方法是将其添加到开发 webpack 配置中：

target: 'web',

我在这里找到了解决方案：https://github.com/webpack/webpack-dev-server/issues/2812

希望这能为某人省去几个小时的麻烦！

Answer 13

开发服务器：{ watchContentBase：真 }

Answer 14

如果您的代码有任何错误，重新加载将不会起作用。花了1小时实现它

Answer 15

对我有用的：

cache: false

https://webpack.js.org/configuration/cache/

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

Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser

javascript

webpack

vue.js

webpack-dev-server