copy-webpack-plugin

介绍

webpack 本身不会打包静态资源，需要我们使用这个插件告诉 webpack，把哪些文件原封不动的 copy 到 dist 文件夹下。

<img src="./public/img/tu.png" />

安装

pnpm i copy-webpack-plugin@5.1.1 -D

使用

webpack.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "[name]-[chunkhash:5].js",
  },
  //
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: "home.html",
      template: "./src/public/index.html",
    }),
    //可以配置多个对象,from是从哪里copy to是copy到哪里
    new CopyPlugin([{ from: "./src/public", to: "./" }]),
  ],
};

结果

dist
	---img
		---home.html
		---tu.png
	---index-2112x.js
	---index-2112x.map
	---home.html