javascript - Webpack 在缩小时更改文件名

Question

那里。

我目前正在开发一个混合 AngularJS + Angular 应用程序，我们使用 Webpack 进行文件捆绑。我们将 .js 和 .css 文件发送到 dist/ 文件夹，当最小化关闭时一切正常。但是，当我打开它时，index.html 中导入的哈希值和命名 JavaScript 文件的哈希值不同；.css 名称是正确的。这是我的 webpack.config.js：

module.exports = (env) => ({
  mode: (env.production)
    ? 'production'
    : 'development',
  entry: './src/app/angular/main.ts',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist/app'),
    clean: true
  },
  externals: {
    // src/assets contains lazy-loaded assets that should not
    // be bundled.
    assets: path.resolve(__dirname, 'src', 'assets')
  },
  optimization: {
    minimize: true,

    minimizer: [
      new TerserPlugin({
        exclude: /assets/,
        extractComments: false
      })
    ],
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /(node_modules|bower_components)/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: 'html-loader'
      },
      {
        test: /\.css$/,
        exclude: [/(node_modules|bower_components)/],
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /src\/.*\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              sourceMaps: !env.production,
              cacheDirectory: true,
              cacheCompression: false
            }
          },
          ...(
            (env.production)
              ? []
              : [{ loader: 'source-map-loader' }]
          )
        ],
        exclude: [/(node_modules|bower_components)/]
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.svg$/,
        type: 'asset/inline'
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true,
              lessOptions: {
                relativeUrls: false,
                paths: [
                  path.resolve(__dirname, 'node_modules'),
                  path.resolve(__dirname, 'bower_components'),
                  'app/less'
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              onlyCompileBundledFiles: true
              // transpileOnly: true
            }
          }
        ],
        exclude: [/node_modules/, /test/]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: path.resolve(__dirname, 'dist/index.html'),
      publicPath: 'app',
      favicon: './src/favicon.ico'
    }),

    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets'),
          to: path.resolve(__dirname, 'dist/assets')
        },
        {
          from: '**/*.html',
          context: 'src/app'
        },
        {
          from: '(node_modules|bower_components)/**/*.(eot|ttf|woff|woff2)',
          to: path.resolve(__dirname, 'dist', 'fonts', '[name][ext]')
        }
      ]
    }),
    new webpack.DefinePlugin({
      'process.env.TESTING': JSON.stringify(process.env.TESTING)
    }),
    // new WatchRunPlugin(),
    serviceUrls
    // ...(
    //   (env.production || env.testing)
    //     ? []
    //     : [
    //       new ESLintPlugin({
    //         context: 'src',
    //         exclude: 'assets',
    //         failOnError: false
    //       }),

    //       new StylelintPlugin({
    //         context: 'src/app',
    //         files: '**/*.html',
    //         failOnError: false,
    //         emitError: false,
    //         emitWarning: true
    //       })
    //     ]
    // )
  ],
  devServer: {
    port: 3000,
    host: '0.0.0.0',
    publicPath: '/',
    contentBase: 'dist',

    watchOptions: {
      // IMPORTANT: watchpack is a bit temperamental in its usage of patterns. Be careful when changing this regex.
      ignored: /^((?!src\/app).)*$/, // this means "repetitions of any pattern that NOT followed by 'src/app', from the beginning to the end of the string"
      aggregateTimeout: 1000
    },

    writeToDisk: true
  },
  resolve: {
    extensions: ['.ts', '.js'],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: 'tsconfig.json',
        extensions: ['.ts', '.js'],
        mainFields: ['browser', 'main']
      })
    ],
    alias: {
      '@angular/upgrade/static': '@angular/upgrade/bundles/upgrade-static.umd.js'
    }
  },
  ...(
    (env.production)
      ? {}
      : {
        devtool: 'eval-source-map',
        watchOptions: { poll: 1000, aggregateTimeout: 600, ignored: [path.resolve(__dirname, './dist')] }
      }
  )
});

结果 dist/index.html 被缩小，并且存在 js 文件的导入语句，但 dist/ 中的 js 文件的名称与导入不匹配。

有什么提示吗？

提前感谢<3

标签： javascriptangularwebpack