web-dev-qa-db-ja.com

Webpack devサーバーが自動リロードしていません

したがって、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');
});
javascriptwebpackwebpack-dev-server
9
Hal Carleton

webpack dev server documentation によると、自動更新をサポートするには、このエントリポイントをwebpack構成に追加する必要があります。

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

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

// ...
3
Hal Carleton

同じ問題が発生し、次の構成で静的およびメモリ内バンドルの自動リロードが有効になりました。重要なのは、 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",
        ...
    }
    ...
}
2
Daniel

以下をwebpackの設定に追加して試してください。

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

注：webpackバージョン^ 3.11.0を使用していました

2
Ninjaneer

私は同様の問題があり、追加して修正しました

    watchOptions: {
        poll: true
    }

Webpackスターターを初めてインストールしたとき、すべてが完璧に機能し、webpack.config.jsに1週間の変更を加えた後、機能しなくなりました。さまざまな推奨事項をいじくりまわしましたが、機能したのはwatchOptions：{poll：true}

参考までに、「webpack」を含むwebpack 4：「4.29.6」、「webpack-cli」：「^ 3.3.0」、「webpack-dev-server」：「3.3.1」

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