Webpack开发服务器不会自动重新加载

Question

我已经设置了webpack和webpack-dev-server，但是webpack-dev-server不会自动重新加载。如果我修改文件并保存，浏览器中没有变化，除非我手动刷新。

这是我的webpack配置和运行webpack-dev-server的脚本文件。有人能看出什么可能阻止自动重新加载吗？

我通过阅读多个教程、文档以及查看react-create-app生成的文件来组合它们。

---

config/webpack.config.dev.js

'use strict';

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');

const extractSass = new ExtractTextPlugin('style.css');

module.exports = {
    entry : './src/index.jsx',
    eslint: {configFile: './src/.eslintrc.json'},
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                include: ['src'],
                loader: 'babel',
                test  : /(\.js|\.jsx)$/
            },
            {
                exclude: /node_modules/,
                include: ['src']
                loader : extractSass.extract([ 'css', 'postcss', 'sass' ]),
                test   : /\.scss$/
            }
        ],
        preLoaders: [
            {
                exclude: /node_modules/,
                loader : 'eslint',
                query  : {presets: [ 'react', 'latest' ]},
                test   : /(\.js|\.jsx)$/
            }
        ]
    },
    output: {
        filename  : 'bundle.js',
        path      : 'dist',
        publicPath: '/'
    },
    plugins: [
        extractSass,
        new HtmlWebpackPlugin({
            inject  : true,
            template: paths.appHtml
        }),
        new webpack.HotModuleReplacementPlugin({multistep: true})
    ],
    postcss: () => [
        autoprefixer({
            browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9'
            ]
        })
    ]
};

---

scripts/dev.js

用$ yarn run dev命令运行

'use strict';

const WebpackDevServer = require('webpack-dev-server');
const config           = require('../config/webpack.config.dev.js');
const webpack          = require('webpack');

const compiler = webpack(config);

const server = new WebpackDevServer(compiler, {
    clientLogLevel    : 'warn',
    compress          : true,
    contentBase       : 'public',
    filename          : config.output.filename,
    historyApiFallback: true,
    hot               : true,
    inline            : true,
    lazy              : false,
    noInfo            : true,
    publicPath        : '/',
    quiet             : true,
    stats             : 'errors-only',
    watchOptions      : {
        aggregateTimeout: 300,
        poll            : 1000
    }
});

server.listen(8080, 'localhost', () => {
    console.log('Listening on port 8080');
});

- hal

Answer 1

根据webpack dev server文档，您需要将此入口点添加到webpack配置中以支持自动刷新。请参考：webpack dev server文档。

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");

- jontem

---

所以这个确切的片段没有解决我的问题，但它指出了潜在的问题，即我的配置中没有在入口属性中包含webpack-dev-server客户端。 - hal

很好，你找到了问题所在。这很奇怪，因为那就是我建议的那一行。重要的是在var compiler = webpack(config);之前添加这一行。将它直接添加到webpack.config.js中的entry与这种做法的区别在于，即使你不想运行webpack-dev-server，它仍然会被添加。 - jontem

我来自未来，我需要这个，谢谢。在从v.4更新到v.5后，自动刷新对我失效了。我像Hal Carleton的回答一样省略了?后面的URL，这很好用。 - Sámal Rasmussen

Answer 2

jontem在他的回答中指出我的配置缺少了webpack-dev-server客户端。

以下是我采取的步骤来应用他的解决方案并设置HMR。

config/webpack.config.dev.js

module.config = {
  // ...
  entry: [
    // converted entry to an array
    // to allow me to unshift the client later
    path.resolve(__dirname, '../src/index.jsx')
  ],
  // ...
  module: {
    loaders: {
      // ...
      {
        // Use style loader instead of ExtractTextPlugin
        // To allow for style injection / hot reloading css
        exclude: /node_modules/,
        loaders: [ 'style', 'css', 'postcss', 'sass' ],
        test   : /\.scss$/
      },
      // ...
    }
  }
}

---

scripts/dev.js

'use strict';

const WebpackDevServer = require('webpack-dev-server');
const config           = require('../config/webpack.config.dev.js');
const webpack          = require('webpack');

// unshift `webpack-dev-server` client
// and hot dev-server
config.entry.unshift('webpack-dev-server/client?/', 'webpack/hot/dev-server');

const compiler = webpack(config);

// ...

- hal

---

我意识到webpack文档中指定了config.entry.app.unshift。那一定是文档中的错误。 - jontem

Answer 3

我遇到了同样的问题，下面的配置启用了静态和内存捆绑自动重载。关键是要启用devServer.watchContentBase。

config/webpack.config.dev.js

...
module.exports = {
    ...
    devServer: {
        contentBase: ...,
        publicPath: ...,
        watchContentBase: true
    },
    ...
}

package.json

{
    ...
    "scripts": {
        "develop": "webpack-dev-server --open --mode development --config config/webpack.config.dev.js",
        ...
    }
    ...
}

- Daniel

Answer 4

请在您的webpack配置中添加以下内容并尝试。

devServer: {
        hot: true,
        inline: true,
        host: "localhost",
        port: 8082,
        watchOptions: {
            poll: true
        }
    }

注意：我使用的是webpack版本^3.11.0

- Rohith K P

Answer 5

"最初的回答"：我曾遇到类似问题，通过添加以下内容解决了它：

。

。

    watchOptions: {
        poll: true
    }

我最初安装webpack启动器时，一切都运行得很顺利。但在对webpack.config.js进行了一周的更改后，它停止工作了。我尝试了各种建议，其中有效的一个是watchOptions: {poll:true}。

提醒一下，我使用的是webpack 4版本，"webpack": "4.29.6", "webpack-cli": "^3.3.0", "webpack-dev-server": "3.3.1"

devServer: {
    port: 3000,
    contentBase: './',
     watchOptions: {
        poll: true
    }
}

- rusty

Answer 6

我之前也遇到了同样的问题，但是在加入这行代码后，我的问题得到了解决。现在自动重新加载已经可以正常工作了。

devServer : {
        contentBase : './',
        watchOptions : {
            poll: true
        }
}

- Dumidu Pramith

Answer 7

对于任何使用Webpack v5的人，您需要在配置文件中将target设置为web，如下所示：

module.exports = {
    entry: "...",
    target: "web",
    .....
}

- Abe Caymo

Answer 8

这个第三方webpack dev server文档提供了我需要的答案： https://wohugb.gitbooks.io/webpack/content/dev_tools/webpack-dev-server.html

以下是相关部分的复制：

在webpack-dev-server配置中没有inline：true标志，因为webpack-dev-server模块无法访问webpack配置。相反，用户必须将webpack-dev-server客户端入口点添加到webpack配置中。

只需将webpack-dev-server/client?http://:添加到（所有）入口点即可。例如，使用上述配置：

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {...});
server.listen(8080);

- Sámal Rasmussen

Answer 9

另外

1. 如果您使用extract-loader，自动重新加载将不起作用
2. 热模块替换功能

devServer: {
    // ,,,
    contentBase: '/your/path'
    watchContentBase: true
    hot: true,
},

防止网页中的静态文件自动刷新，除非您在浏览器中按F5按钮

- Artur Loginov