11. Plugin

前端知识

已于 2023-03-11 14:00:04 修改

阅读量83

点赞数

分类专栏： webpack 文章标签： javascript 前端 webpack

于 2022-11-07 20:35:05 首次发布

本文链接：https://blog.csdn.net/m0_71902265/article/details/127738368

版权

webpack 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Loader 是用于特定的模块类型进行转换。
Plugin 可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等。

CleanWebpackPlugin

作用：自动删除 dist 文件夹

安装：npm install clean-webpack-plugin -D

使用：

const {
    CleanWebpackPlugin
} = require("clean-webpack-plugin")

module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

HtmlWebpackPlugin

安装：npm install html-webpack-plugin -D

使用：

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

module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    }
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin()
    ]
}

执行 npm run build 之后，在 dist 目录中会有 index.html 文件，默认情况下是根据 ejs 的一个模板来生成的，在html-webpack-plugin的源码中，有一个default_index.ejs模块。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

自定义HTML模板

目的：创建一个属于自己的 index.html 模块。

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "哈哈哈",
            template: "./src/test.html"
        })
    ]
}