Webpack 开发服务器不会自动重新加载 [英] Webpack dev server not auto-reloading

问题描述

所以我已经设置了 webpack 和 webpack-dev-server，但是 webpack-dev-server 不会自动重新加载.如果我修改了一个文件并保存了它，那么在我手动刷新之前浏览器中没有任何变化.

So I've setup webpack and webpack-dev-server, but webpack-dev-server does not auto-reload. If i modify a file and save it there is no change in the browser until I manually refresh.

这是我的 webpack 配置和运行 webpack-dev-server 的脚本文件.有没有人看到任何可能阻止自动重新加载工作的东西?

Here is my webpack config and my script file that runs webpack-dev-server. Does anyone see anything that could be preventing auto-reload from working?

我通过阅读多个教程、文档以及阅读 react-create-app 生成的文件将这些组合在一起.

I put these together by reading through multiple tutorials, the docs, and by reading through the react-create-app generated files.

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

推荐答案

根据 webpack 开发服务器文档 你应该将此入口点添加到 webpack 配置中以支持自动刷新.

According to the webpack dev server documentation you should add this entry point to the webpack configuration to support automatic refresh.

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

这篇关于Webpack 开发服务器不会自动重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！