Javascript 如何删除webpack4创建的重复JS包?

Javascript 如何删除webpack4创建的重复JS包?,javascript,webpack-4,Javascript,Webpack 4,我正在尝试使用Webpack4创建JavaScript库和CSS包(提取单个文件中使用的所有CSS) 我的webpack.config.js文件配置如下: var path = require("path"); var HtmlWebpackPlugin = require("html-webpack-plugin"); // Require to generate html file var MiniCssExtractPlugin = require("mini-css-extract-p

我正在尝试使用Webpack4创建JavaScript库和CSS包(提取单个文件中使用的所有CSS)

我的webpack.config.js文件配置如下:

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin"); // Require  to generate html file
var MiniCssExtractPlugin = require("mini-css-extract-plugin"); // Require  to generate css file

module.exports = {
  entry: __dirname + "/src/app/index.js", // webpack entry point. Module to start building dependency graph
  output: {    
    path: path.join(__dirname, "dist"), // Folder to store generated bundle
    filename: "chart.min.js", // Name of generated bundle after build
    library: ["Chart"],
    libraryTarget: "umd"
  },
  module: {  // where we defined file patterns and their loaders
      rules: [ 
          {
            test: /\.js$/,
            use: "babel-loader",
            exclude: [
              /node_modules/
            ]
          },
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader"
            ],
            exclude: [
              /node_modules/
            ]
          } 
      ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "chart",
          test: /\.css$/,
          chunks: "all",
          enforce: true
        }
      }
    }
  },
  plugins: [  // Array of plugins to apply to build chunk
      new HtmlWebpackPlugin({
          template: __dirname + "/src/public/index.html",
          inject: "body"
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css"        
      })    
  ],
  devServer: {  // configuration for webpack-dev-server
      contentBase: "./src/public",  //source of static assets
      port: 7700 // port to run dev-server
  } 
};
通过运行上述代码,我在dist文件夹中获得以下文件 “1.chart.min.js”、“chart.min.js”、“chart.css”、“index.html”


我可以知道为什么我会得到“1.chart.min.js”文件,以及如何停止生成该文件吗?

您可能想使用应用程序中的

清理输出路径,您是否在懒洋洋地加载任何模块??您的代码中有任何
import()。然后是
语句吗?没有,具体来说,我有下面的import语句:“import util from”。/util”;从“./public/css/Gauge.css”导入样式谢谢,我已经添加了这个,但我的问题是我的配置每次都会生成“1.chart.min.js”文件,所以我如何停止它?所以在同一个文件夹中有两个同名文件?是的,如que中所述。“1.chart.min.js”、“chart.min.js”是两个内容相同的文件。这是完整的网页配置文件吗?是。(很抱歉,我无法在注释中添加少于15个字符,因此添加了此行)