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 永远不会提供给浏览器使用

在第二个项目符号上，我可以看到这一点，因为在浏览器窗口中 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

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

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

const path = require('path');

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

Answer 3

正确的解决方案

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

默认禁用。

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

例子：

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

Answer 4

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

进行了大量调查 - 最终从 git 中的先前提交开始，然后一个接一个地重新引入更改，直到我弄明白为止。

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

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

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

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

target: 'web', 

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

希望可以为某人省去几个小时的麻烦！

Answer 5

不知何故，就我而言，删除“--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 6

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

Answer 7

这可能是由于 ExtractTextPlugin 而发生的。在开发模式下停用 ExtractTextPlugin。仅用于生产构建。

Answer 8

在我一个接一个地在同一个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 9

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

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

打开它是我的票。

Answer 10

我遇到过类似的情况，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 11

我将把我自己的关于 Webpack --watch woe 的特殊故事添加到这里的苦难之墙。

我在跑步

webpack --watch

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

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

Answer 12

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

Answer 13

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

Answer 14

开发服务器：{ 观看内容基础：真 }