webpack4.0中使用clean-webpack-plugin，copy-webpack-plugin

最新推荐文章于 2022-10-26 00:33:40 发布

原创最新推荐文章于 2022-10-26 00:33:40 发布 · 983 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用clean-webpack-plugin和copy-webpack-plugin进行项目打包优化。通过clean-webpack-plugin在生产环境打包前清除旧文件，确保输出目录的纯净。同时利用copy-webpack-plugin将特定文件如文档从源目录复制到目标目录，保持项目完整性。

1、安装

yarn add clean-webpack-plugin -D

yarn add copy-webpack-plugin -D

2、webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

plugins: [
    ...
    // 打包的时候输出文件夹dist目录中的所有文件都将被删除，但是目录不会删除 
    new CleanWebpackPlugin(),
    new CopyPlugin([{ // 注意参数是数组，把项目中存在的某一个文件复制到打包后的文件夹（dist）里
      from: 'doc',
      to: 'doc'
    }]),
    new webpack.BannerPlugin('make L') // 版权声明，webpack内置，添加到打包输出后的js代码之前
  ]

作用：clean-webpack-plugin在生产环境打包的时候先删除之前生成的文件

copy-webpack-plugin用于复制文件