Webpack之Plugins

旧城等待， 2024-04-17 14:16 57阅读 0赞

### 文章目录 ###

*  概念
 *  HTMLWebpackPlugin
 *   *  使用
 *  clean-webpack-plugin
 *   *  使用

# 概念 #

`plugin`可以在Webpack运行到某个时刻的时候，来自动做一些事情，类似于React里的生命周期函数。

# HTMLWebpackPlugin #

这个插件的主要功能是在打包结束之后，自动在输出目录下生成一个html文件，并把打包生成的JS文件自动的引入到这个html文件中。

## 使用 ##

const path = require('path');
    const HTMLWebpackPlugin = require('html-webpack-plugin');
    module.exports ={
        
        entry: './src/index.js',
        output: {
        
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        mode: 'development',
        module: {
        
            rules: [{
        
                test: /\.(webp|jpg|png)$/,
                use:{
        
                    loader: 'url-loader',
                    options: {
        
                        limit: 2048,
                        name: '[name].[ext]',
                        outputPath: 'images/'
                    }
                }
            },
            {
        
                test: /\.css$/,
                use: [
                    'style-loader',
                     {
        
                         loader: 'css-loader',
                         options: {
        
                             modules: true
                         }
                     }
                ]
            }],
            plugins: [new HTMLWebpackPlugin()]
        }
    };

先安装`html-webpack-plugin`，然后在配置文件中引入，然后配置一个`plugins`字段。

这样打包出来的html是一个空的html，仅仅引入了打包后的JS文件，如果我希望它按照一个模板来生成一个html，只是将打包后的JS文件引入，该怎么做？

很简单，`new HTMLWebpackPlugin()`这个构造函数接受一个对象参数，传入`{template: 'src/index.html'}`即可以按照我所传入的模板页面来生成一个新的html文件了。

# clean-webpack-plugin #

有些时候，我们更改了配置文件，例如修改了打包后的文件名，重新打包后会看到旧的文件依然存在，我们就会想如果Webpack能帮助我们先把上次打包的文件进行删除，然后再打包该多好。

这个心愿可以通过`clean-webpack-plugin`这个插件来实现：

## 使用 ##

const path = require('path');
    const HTMLWebpackPlugin = require('html-webpack-plugin');
    const {
         CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    module.exports ={
        
        entry: './src/index.js',
        output: {
        
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        mode: 'development',
        module: {
        
            rules: [{
        
                test: /\.(webp|jpg|png)$/,
                use:{
        
                    loader: 'url-loader',
                    options: {
        
                        limit: 2048,
                        name: '[name].[ext]',
                        outputPath: 'images/'
                    }
                }
            },
            {
        
                test: /\.css$/,
                use: [
                    'style-loader',
                     {
        
                         loader: 'css-loader',
                         options: {
        
                             modules: true
                         }
                     }
                ]
            }],
        },
        plugins: [
            new HTMLWebpackPlugin({
        template: 'src/index.html'}),
            new CleanWebpackPlugin()
        ]
    };

这样就可以实现之前想要的效果了。在默认情况下，该插件就是删除`output`内指定的文件夹的。

发表评论取消回复

表情：

评论列表（有 0 条评论，57人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack之Plugins

文章目录 * 概念 * HTMLWebpackPlugin * * 使用 * clean-webpack-plugin * * 使用 ...

旧城等待，/ 2024年04月17日 14:16/ 0 赞/ 58 阅读

相关 webpack的loader和plugin

webpack是一个模块打包器，loader和plugin可以扩展很多开箱即用的功能 loader Loader让webpack能够处理不同的文件。loader可以将所

痛定思痛。/ 2023年06月06日 08:07/ 0 赞/ 8 阅读

相关 webpack 基础理解[二]之常用loader & plugin

> 业精于勤荒于嬉 webpack 中常用的 loader css 模块化：关键 modules:true rules: [{

迷南。/ 2023年01月18日 04:14/ 0 赞/ 117 阅读

相关 Webpack5 踩坑之（html-webpack-plugin）

2021 开工第一天就给我个大大的惊喜。 ERROR in Error: The loader "/home/project/vue3-demo/node_mod

秒速五厘米/ 2022年10月30日 07:27/ 0 赞/ 277 阅读

相关【Webpack】1065- 手把手带你入门Webpack Plugin

关于 Webpack 在讲 Plugin 之前，我们先来了解下 Webpack。本质上，Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包

偏执的太偏执、/ 2022年09月09日 11:57/ 0 赞/ 228 阅读

相关 webpack 项目使用 html-webpack-plugin（3）

html-webpack-plugin 这个插件的功能是将 html 文件打包，在上一篇的博客中我们使用webpack-server将webpack项目使用本地的项目打开如：l

冷不防/ 2022年09月03日 08:25/ 0 赞/ 232 阅读

相关 webpack插件html-webpack-plugin详解

插件地址：[https://www.npmjs.com/package/html-webpack-plugin][https_www.npmjs.com_package_htm

短命女/ 2022年06月17日 05:08/ 0 赞/ 217 阅读

相关 webpack入门（六）——html-webpack-plugin

html-webpack-plugin 该插件可以简化创建调用webpack bundles的html文件。在每次编译后，文件名会包含有hash值的bundles 特别有

ゝ一纸荒年。/ 2022年06月16日 20:57/ 0 赞/ 218 阅读

相关 html-webpack-plugin详解【转载】

引言最近在react项目中初次用到了[`html-webapck-plugin`][html-webapck-plugin]插件，用到该插件的两个主要作用：为

曾经终败给现在/ 2022年01月12日 03:59/ 0 赞/ 162 阅读

相关 webpack-plugin

plugin loader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如：当webpack生成文件时，顺便多生成一个说明描述文件当

今天药忘吃喽~/ 2021年08月26日 15:01/ 0 赞/ 328 阅读