Webpack输出重复的脚本标签

问题描述

我正开始构建我的应用程序，因此目前我只有很少的代码。当webpack生成index.html文件时，它两次包含所有Javascript，这会在React中导致错误。

使我的webpack配置重复所有JavaScript可能出什么问题了？

HtmlWebpackPlugin产生的html包含：

  <body>
    <div id="app">
    <div class="app-spinner"></div>
    </div>
    <script src="index.e089a4bb51043ee42dd1.js" type="text/javascript"></script>
    <script src="vendors.25e5b2c570c03aac7cee.js" type="text/javascript"></script>
    <script src="app.b2527e4e46c3c3b95a11.js" type="text/javascript"></script>
    <script src="react.a6f26e32b775aaa7d17d.js" type="text/javascript"></script>
  <script type="text/javascript" src="index.e089a4bb51043ee42dd1.js"></script><script type="text/javascript" src="vendors.25e5b2c570c03aac7cee.js"></script><script type="text/javascript" src="app.b2527e4e46c3c3b95a11.js"></script><script type="text/javascript" src="react.a6f26e32b775aaa7d17d.js"></script></body>

我的webpack.config.js包含

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

module.exports = (env,{ mode }) => {
  var config = {
    entry: {
      app: './src/app.js',react: ['react','react-dom'],},devtool: 'none',devServer: {
      contentBase: path.join(__dirname,'dist'),compress: true,hot: true,port: 9000,resolve: {
      modules: ['src','node_modules'],extensions: ['*','.js','.jsx','.css','.scss','.sass'],alias: {
        '~config': path.resolve(__dirname,'src/config'),'~components': path.resolve(__dirname,'src/components'),'~styles': path.resolve(__dirname,'src/styles'),'~images': path.resolve(__dirname,'src/images'),'@material-ui/styles': path.resolve(__dirname,'node_modules','@material-ui/styles'),output: {
      path: path.resolve(__dirname,filename: 'index.[hash].js',chunkFilename: '[name].[contenthash].js',optimization: {
      runtimeChunk: 'single',splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all',// stats: {
    //   maxModules: Infinity,//   optimizationBailout: true,// },plugins: [
      new HtmlWebpackPlugin({
        minify: false,template: require('html-webpack-template'),inject: true,title: 'Octopedia',favicon: './public/images/favicon/favicon.ico',appMountId: 'app',Meta: [{ name: 'viewport',content: 'width=device-width,initial-scale=1.0' }],links: [
          { href: '/site.webmanifest',rel: 'manifest' },{ href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap',rel: 'stylesheet' },],appMountHtmlSnippet: '<div class="app-spinner"></div>',headHtmlSnippet:
          '<style>div.app-spinner{position:fixed;top:50%;left:50%;border:16px solid #f3f3f3;border-top:16px solid #3498db;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;z-index:1;animation:spin 2s linear infinite;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}</style >',}),new copyWebpackPlugin({
        patterns: [{ from: 'public' }],module: {
      rules: [
        {
          test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
            loader: 'babel-loader',options: {
              cacheDirectory: true,cacheCompression: false,presets: [['@babel/preset-env',{ modules: false }],'@babel/preset-react'],{
          test: /\.(png|svg|jpg|gif)$/,use: {
            loader: 'file-loader',};

  if (mode === 'development') {
    config.mode = 'development';
    config.devtool = 'eval-source-map';
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
    config.module.rules.push({
      test: /\.(sass|scss|css)/,use: ['style-loader','css-loader','sass-loader'],});
  } else {
    config.mode = 'production';
    config.devtool = 'none';
    config.plugins.push(new MiniCssExtractPlugin({ filename: 'index.css' }));
    config.module.rules.push({
      test: /\.(sass|scss|css)/,use: [MiniCssExtractPlugin.loader,});
  }

  return config;
};

解决方法

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

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

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

html-webpack-plugin webpack webpack webpack