Javascript 网页包开发服务器未自动重新加载

因此，我已经设置了webpack和

webpack dev server

，但是

webpack dev server

不会自动重新加载。如果修改并保存文件，则在手动刷新之前，浏览器中不会有任何更改

这是我的网页包配置和脚本文件，它运行

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

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

根据，您应该将此入口点添加到网页包配置中，以支持自动刷新

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

---

jontem在回答中指出，我的配置缺少一个

webpack开发服务器

客户端

以下是我应用他的解决方案和设置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$/
      },
      // ...
    }
  }
}

'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);

// ...

---

scripts/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$/
      },
      // ...
    }
  }
}

'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);

// ...

---

我也有同样的问题，下面的配置启用了静态和内存包自动重新加载。关键是启用

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

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

package.json

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

---

请在您的网页配置中添加以下内容并重试

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

---

注意：我使用的是网页包版本^3.11.0

我有一个类似的问题，通过添加

    watchOptions: {
        poll: true
    }

当我第一次安装webpack starter时，一切都完美无瑕，在对webpack.config.js进行了一周的更改后，它停止了工作。我修改了各种各样的建议，其中有效的是watchOptions:{poll:true}

仅供参考，我是带有“webpack”：“4.29.6”、“webpack cli”：“^3.3.0”、“webpack dev server”：“3.3.1”的webpack 4

也

如果使用

提取加载程序

，自动重新加载将不起作用

热模块更换功能

---

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

此第三方网页包开发服务器文档提供了我需要的答案：

相关章节转载如下：

webpack dev服务器配置中没有inline:true标志，因为webpack dev服务器模块无权访问webpack配置。相反，用户必须将webpack dev服务器客户端入口点添加到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);

---

所以这个片段并没有解决我的问题，但它确实指出了根本的问题，那就是我没有在我的config的entry属性中包含

webpack dev server

客户端。很好，你找到了问题。这很奇怪，因为这和我建议的路线是一样的。在

var compiler=webpack（config）之前添加行很重要直接将其添加到webpack.config.js中的条目中的区别在于，即使您不想运行webpack dev服务器，它也会被添加。我来自未来，我需要这一点，谢谢。从
v.4
更新到
v.5
后，我的自动刷新中断。我在
？
后面漏掉了url，就像哈尔·卡尔顿的回答一样，这很好。我意识到webpack文档指定了
config.entry.app.unshift
。这一定是文档中的错误。