【webpack扩展】- 1、clean-webpack-plugin – 清除输出目录、html-webpack-plugin – 自动生成页面、copy-webpack-plugin – 复制静态

最新推荐文章于 2025-11-15 08:34:40 发布

原创

最新推荐文章于 2025-11-15 08:34:40 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨Webpack中clean-webpack-plugin、html-webpack-plugin及copy-webpack-plugin的使用方法与原理。涵盖清除输出目录、自动生成页面及复制静态资源等功能，助力前端项目自动化构建。

文章目录

- - 插件

具体用法去 npm官网上查看

插件

1、clean-webpack-plugin – 清除输出目录

修改代码后，重新打包，dist目录下生成新文件的时候，自动删除dist里的旧文件
用法详见npm

//webpack.config.js
const {
   
    CleanWebpackPlugin } = require('clean-webpack-plugin');
//1.  CleanWebpackPlugin 是构造函数，插件就是一个构造函数
 
const webpackConfig = {
   
   
    plugins: [
        new CleanWebpackPlugin(),   //2.  创建一个插件对象
    ],
};
 
module.exports = webpackConfig;

原理：emit 的时候，先用node的fs模块来删除dist目录

2、html-webpack-plugin – 自动生成页面

打包的时候，自动在dist文件夹下生成一个index.html 并引用打包后的js
打包后的js 需要在页面上运行，没用html-webpack-plugin插件的话，需要自己在dist 文件夹下写一个index.html 然后引打包后的js, 但是我们修改内容，打包后，上面的clean-webpack-plugin 会自动清除dist目录下的文件，这样index.html就也被清除了，html-webpack-plugin就可以解决这个问题，自动生成index.html页面
原理：emit 的时候，利用nodejs的fs模块生成一个页面文件，给文件内容的合适位置添加一个script元素，script的src路径引用打包后的js文件
如果我们希望我们的页面安装自己的需求生成：

//webpack.config.js
const {
   
    CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   
   
    mode: "development",
    devtool: "source-map",
    entry: {
   
     //  2.1-- 多入口
        home: "./src/index.js",
        a: "./src/a.js"
    },
    output: {
   
   
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(