Question

我正在尝试使用webpack 4创建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”文件，如何停止生成该文件吗？

Answer 1

您可能希望使用clean-webpack-plugin

清理输出路径

如何删除由webpack4创建的重复的JS捆绑包？

1 个答案: