CopyWebpackPlugin 在构建过程复制文件到输出目录

const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const commonStyleLoader = [

  MiniCssExtractPlugin.loader,

  "css-loader",

  {

    loader: "postcss-loader",

    options: {

      postcssOptions: {

        plugins: ["postcss-preset-env"],

      },

    },

  },

];

module.exports = {

  entry: "./src/index.js",

  output: {

    path: path.join(__dirname, "../dist"),

    filename: "[name].[contenthash:8].js",

  },

  resolve: {

    extensions: [".jsx", ".js", ".json"],

  },

  module: {

    rules: [

      {

        test: /\.css$/,

        exclude: /node_modules/,

        use: commonStyleLoader,

      },

      {

        test: /\.scss$/,

        exclude: /node_modules/,

        use: [...www.laipuhuo.com commonStyleLoader, "sass-loader"],

      },

      {

        test: /\.(js|jsx)$/,

        exclude: /node_modules/,

        use: ["babel-loader"],

      },

      {

        test: /\.(jp(e)g|png|gif)$/,

        type: "asset",

        parser: {

          dataUrlCondition: {

            maxSize: 8 * 1024,

          },

        },

        generator: {

          filename: "img/[name].[contenthash:8].[ext]",

        },

      },

    ],

  },

  plugins: [

    new MiniCssExtractPlugin({

      filename: www.laipuhuo.com "style/[name].[contenthash:8].css",

    }),

    new HtmlWebpackPlugin({

      template: "./public/index.html",

      inject: 'body',

      minify: {

        collapseWhitespace: true,

      }

    }),

  ],

};

const { merge } = require("webpack-merge");

const baseConfig = require("./webpack.base");

const devConfig = {

  mode: "development",

  devServer: {

    open: true,

    port: 8001,

    compress: true,

    hot: true

  },

};

module.exports = merge(devConfig, baseConfig);

const { merge } = require("webpack-merge");

const baseConfig = require("./webpack.base");

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");

const TerserWebpackPlugin = require("terser-webpack-plugin");

const { Clean www.laipuhuo.com WebpackPlugin } = require("clean-webpack-plugin");

const prodConfig = {

  mode: "production",

  optimization: {

    minimizer: [

      new CssMinimizerWebpackPlugin(),

      new TerserWebpackPlugin({

        parallel: true,

      }),

    ],

    splitChunks: {

      chunks: "all",

      cacheGroups: {

        vendor: {

          test: /[\\/]node_modules[\\/]/,

          filename: "[name].bundle.js",

        },

      },

    },

  },

  externals: {

    react: "React",

    "react-dom": "ReactDOM",

  },

  plugins: [new www.laipuhuo.com CleanWebpackPlugin()],

};

module.exports = merge(prodConfig, baseConfig);