《Webpack 5》直播重装

Question

我把webpack 4更新到了webpack 5，之后一切正常，除了更新浏览器(实时重载)，谁能说出原因呢？这是我的配置。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');

module.exports = (env, argv) => {
  const { mode = 'development' } = argv;
  const isProd = mode === 'production';
  const isDev = mode === 'development';

  const getStyleLoaders = () => {
    return [isProd ? MiniCssExtractPlugin.loader : 'style-loader'];
  };
  return {
    context: path.resolve(__dirname, 'src'),
    mode: isProd ? 'production' : isDev && 'development',
    entry: './index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isDev ? 'script/script.js' : 'script/bundle-[hash:8].js',
      publicPath: '/',
    },
    resolve: {
      extensions: ['.js'],
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      publicPath: '/',
      open: true,
      watchContentBase: true,
      port: 8080,
    },
    devtool: isProd ? false : 'source-map',
  };
};

Answer 1

您需要在您的Webpack配置中设置{target: 'web'}，并确保像这样运行您的开发服务器：webpack serve --mode development --env development

Answer 2

实时重载只有在webpack捆绑包的目标是'web‘的情况下才会起作用，所以将这一行添加到webpack.config中会使其起作用：

target: 'web'

尽管如此，在写这篇文章的时候，在webpack-dev-server@3中有一个bug，当目标是一个包含‘web’的数组时，它会阻止实时重新加载：https://github.com/webpack/webpack-dev-server/pull/3271

所以你不能这样做: you ‘t do：

target: ['web', 'es5']

也许有人可以使用这个变通方法...

target: isProduction ? ['web', 'es5'] : 'web'

Answer 3

我不确定这是否与您的问题有关，但是您使用的是什么版本的webpack-cli？有些人报告说，由于webpack-cli v4.0.0的原因，导致此问题的原因是webpack-dev-server

Error: Cannot find module 'webpack-cli/bin/config-yargs' #2759

如果您遇到此问题，您可以尝试将webpack-cli降级到版本: 3.3.0 (确切地说)，并将webpack-dev-server降级到版本：^3.11.0。