webpack常用插件(clean，html，copy）

最新推荐文章于 2023-07-12 10:23:32 发布

火鸡面多放火鸡

最新推荐文章于 2023-07-12 10:23:32 发布

阅读量349

点赞数

分类专栏：模块化打包工具文章标签： webpack javascript

本文链接：https://blog.csdn.net/weixin_45047039/article/details/110285417

版权

打包工具同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

模块化

7 篇文章 0 订阅

订阅专栏

webpack常用插件(clean，html，copy）

一、clean-webpack-plugin
二、html-webpack-plugin
三、copy-webpack-plugin

一、clean-webpack-plugin

安装clean-webpack-plugin

yarn add clean-webpack-plugin --dev

配置

const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
    mode:"none",// 三种工作模式: none | production | development
    entry:"./src/index.js", // 指定打包入口文件的路径,注意,如果这里的路径是相对路径, ./是不能省略的
    output:{ // 通过output属性设置输出文件位置,output的值要求是一个对象
        filename:"bundle.js", // 通过filename指定输出文件名称
        path:path.join(__dirname, "dist") // 通过path属性指定输出文件的目录,需要输入一个绝对路径
    },
	plugins:[
        new CleanWebpackPlugin()// 绝大多数插件导出的都是一个类型，通过这个类型去创造一个实例
    ]
}

安装配置clean-webpack-plugin后，每次执行打包时会自动清除打包目录中的文件。

二、html-webpack-plugin

安装

yarn add html-webpack-plugin --dev

配置

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
	...,
	plugins:[
        // 绝大多数插件导出的都是一个类型，通过这个类型去创造一个实例
        new CleanWebpackPlugin(), // 打包前清空dist目录
        new HtmlWebpackPlugin() // 自动生成html文件
    ]
}

使用html-webpack-plugin，打包时会自动生成index.html文件并自动引入打包后的bundle.js

打包生成的index.html内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
  <script src="bundle.js"></script></body>
</html>

项目名默认为Webpack App。

我们可以添加一些配置选项：

new HtmlWebpackPlugin(
           {
               title:"webpack demo",// 设置生成的html标题
               meta:{// 以对象形式设置页面中的源数据标签
                   viewport:"width=device-width"
               }
           }
       )

生成结果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>webpack demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
  <script src="bundle.js"></script></body>
</html>

如果需要自定义的内容比较多的话，我们一般会写一个html模板，然后根据模板生成html文件。

通过配置template指定模板：

new HtmlWebpackPlugin(
           {
               title:"webpack demo",// 设置生成的html标题
               meta:{// 以对象形式设置页面中的源数据标签
                   viewport:"width=device-width"
               },
               template:"./index.hbs"
           }
       )

如果配置了html-loader处理html文件的话，index.html先被html-loader编译转换，就无法通过<%= htmlWebpackPlugin.options %>获取配置选项信息了，所以改名为index.hbs。

<!-- index.hbs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过htmlWebpackPlugin.options访问插件中的配置数据 -->
    <h1>
        这是标题：
        <%= htmlWebpackPlugin.options.title %>
    </h1>
</body>
</html>

生成结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<meta name="viewport" content="width=device-width"></head>
<body>
    <h1>
        这是标题：
        webpack demo
    </h1>
<script src="bundle.js"></script></body>
</html>

三、copy-webpack-plugin

安装

yarn add copy-webpack-plugin --dev

配置

plugins:[
	new CopyWebpackPlugin({
            patterns: [
                {
                    from:"public",// 指定要拷贝的目录
                    to:"public" // 指定输出目录，会在output中指定的目录下生成
                }
            ]
        })
]

这里就不演示了，大家可以自己尝试一下哦。

火鸡面多放火鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack常用插件(clean，html，copy）

webpack常用插件(clean，html，copy）一、clean-webpack-plugin二、html-webpack-plugin三、copy-webpack-plugin一、clean-webpack-plugin安装clean-webpack-pluginyarn add clean-webpack-plugin --dev配置const path = require("path")const { CleanWebpackPlugin } = require("clean-we
复制链接

扫一扫