重新加载后，Webpack 4 开发服务器未加载脚本

问题描述

当我使用 webpack serve 运行我的应用程序时，它启动并运行良好。但是，当我进行任何更改并保存时，它会编译并重新加载，但屏幕上什么也没有，而且我注意到所有指向包文件的 <script> 标记都从生成的 index.html 中消失了。我的 webpack.config.js 看起来像：

config.devServer = {
    contentBase: path.join(__dirname,'build','jar','frontend-resources'),// This is the same as config.output.path
    port: 8081,hot: true,// Also tried to set this to false,doesn't work either way.
    proxy: {
        '*': 'http://localhost:8080',}
};

当我运行服务器时，我在控制台中看到：

i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from undefined
i ｢wds｣: Content not from webpack is served from C:\Users\FOO BAR\Documents\dev\app\frontend\build\jar\frontend-resources

我确实收到了关于包大小的警告，但我认为它不应该中断重新加载？我正在使用 webpack 4.44.0 和 webpack-dev-server 3.11.0

编辑

这是请求的完整 webpack 配置。由于我之前从未配置过 webpack，所以它可能非常臃肿，所以我在 GitHub 上找到的一些配置模板之上构建：

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
const path = require("path");

const ENV = process.env.npm_lifecycle_event;
const isTest = ENV === 'test' || ENV === 'test-watch';
const isProd = ENV === 'build';
const appPath = '/build/jar/frontend-resources';

module.exports = function makeWebpackConfig() {
  const config = {};

  config.resolve = {
    extensions: ['.tsx','.ts','.js'],};

  config.entry = isTest ? void 0 : [
    'webpack-dev-server/client?http://localhost:8081','webpack/hot/dev-server','./src/main/app.ts',];


  config.output = isTest ? {} : {
    path: __dirname + appPath,publicPath: '/',filename: '[name].js',chunkFilename: '[name].js'
  };

  if (isTest) {
    config.devtool = 'inline-source-map';
  }
  else if (isProd) {
    config.devtool = 'source-map';
  }
  else {
    config.devtool = 'eval-source-map';
  }

  config.module = {
    rules: [
      {
        test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,},{
        test: /\.(sa|sc|c)ss$/,use: [
          !isProd ? 'style-loader' : MiniCssExtractPlugin.loader,{ loader: 'css-loader',options: { url: false,sourceMap: true } },'postcss-loader','sass-loader',],{
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: 'file-loader'
      },{
        test: /\.html$/,loader: 'html-loader',}]
  };

  if (isTest) {
    config.module.rules.push({
      enforce: 'pre',test: /\.js$/,exclude: [
        /node_modules/,/\.spec\.js$/
      ],loader: 'istanbul-instrumenter-loader',query: {
        esModules: true
      }
    })
  }

  config.optimization = {
    runtimeChunk: 'single',splitChunks: {
      chunks: 'all',maxInitialRequests: Infinity,minSize: 0,minimize: true,minimizer: [
      new UglifyJsPlugin({
        test: /\.js(\?.*)?$/i,}),};

  config.plugins = [
    new CleanWebpackPlugin(),new MiniCssExtractPlugin(),new webpack.LoaderOptionsPlugin({
      test: /\.css$/i,options: {
        postcss: {
          plugins: [autoprefixer]
        }
      }
    })
  ];

  // Skip rendering index.html in test mode
  if (!isTest) {
    config.plugins.push(
      new copyWebpackPlugin({
        patterns: [
          { from: './src/assets' },{ from: './src/imgsrc' },]
      }),new HtmlWebpackPlugin({
        template: './src/assets/index.html',inject: 'body'
      }),new SVGSpritemapPlugin('./src/svgsrc/*.svg',{
        output: {
          filename: 'svg-bundle.svg',sprite: {
          prefix: false,generate: {
            symbol: true,}
        }
      })
    )
  }

  config.devServer = {
    contentBase: path.join(__dirname,publicPath: config.output.publicPath,stats: 'minimal',port: 8081,inline: true,proxy: {
      '*': 'http://localhost:8080',}
  };

  return config;
}();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）