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

最新推荐文章于 2022-01-12 23:38:13 发布

Eva3288

最新推荐文章于 2022-01-12 23:38:13 发布

阅读量1.3k

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/Eva3288/article/details/106915524

版权

webpack 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

- - 插件

具体用法去 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(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",   //  1. 页面按照模板来生成，一般模板放在public下，也可以在其他地方
            filename: "home.html",  // 3、改变生成出来页面的文件名
            chunks: ["home"]   // 2.2--多入口时，生成的页面中引用哪个chunk生成的js  , 默认值是：字符串"all" --表示所有的打包结果都要引用，其他情况是数组格式
        }),
        new HtmlWebpackPlugin({ //一个插件示例对象，是生成一个页面，
            template: "./public/index.html",
            filename: "a.html",
            chunks: ["a"]
        })
    ]
}

1：template ：设置生成index.html 的模板内容,最后会按照模板生成页面，并引用js
2. 多入口的时候，多个chunk 会生成多个bundle，生成的index.html 会把多个js都引用进来，但我们只想生成的页面只引用一个js,可以用chunks来进行配置
3.chunks ：指定 生成的页面中引用的js是哪个chunk生成的js，它的值时一个数组，默认值是 "all" ---表示所有的打包结果都要引用
4. filename：改变生成出来页面的文件名

多页面配置 – 多使用几次插件，多次实例化

如果我们想做如下的多页面，每个页面用不同的js(不同的chunk生成的bundle)，要怎么做
通过构造函数创建的实例，每一个对象都有自己的一套独立的功能，只需要再一次实例化，指定模块和对应的chunk

//webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: { 
        home: "./src/index.js",
        a: "./src/a.js"
    },
    output: {
        filename: "scripts/[name].[chunkhash:5].js"   // 生成的文件，放在dist下的scripts文件夹下面， dist的index.html里也可以自动添加scripts 文件夹
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",  
            filename: "home.html",  
            chunks: ["home"]   
        }),
        new HtmlWebpackPlugin({ //一个插件示例对象，是生成一个页面，
            template: "./public/index.html",
            filename: "a.html",
            chunks: ["a"]
        })
    ]
}

另外：
output：{ filename: "scripts/[name].[chunkhash:5].js" } 生成的文件，放在dist下的scripts文件夹下面， dist的index.html里也可以自动添加scripts 文件夹

3、copy-webpack-plugin – 复制静态资源到dist目录下

//webpack.config.js
plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",  //模板文件
            filename: "home.html",  
            chunks: ["home"]   
        })
    ]

<!-- 模板文件：public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>webpack</h1>
    <p>
        <img src="./img/webpack.png" alt="">
        <!-- 模板文件 中引用了写死的静态图片，然后进行打包，打包 -->
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid?
    </p>
</body>
</html>

打包后，因为 html-webpack-plugin 插件的作用，dist目录下会自动根据模板生成index.html文件，并自动引入打包后的js文件，但有个问题：模板里的静态资源public/img/webpack.png没有被打包进dist文件夹里

为什么，静态资源没有打包到dist？

因为静态资源和入口文件 ./src/index.js 没有关系，入口文件里没有导入依赖，所以webpack 打包的时候，没有依赖，就不知道静态资源的存在，
html-webpack-plugin 插件 只是按照模板生成html文件，并不会解析模板，所以我们希望可以把publick 下的某些目录下的内容原封不动的放到 dist文件夹下，这是可以用到插件copy-webpack-plugin

//webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');   // 1. 引入插件
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new CopyPlugin([    // 2.实例化插件
            { from: "./public", to: "./" }   // 3.  数组里每一个对象都是一个赋值规则  ，to相对的就是输出目录dist 所以 to后面的目录就不用再写dist了  ，to: "./" 表示直接放到输入目录dist 文件夹下
        ])
    ]
}

插件copy-webpack-plugin 就是把publick下的文件，原封不动的copy到dist文件夹下
public下的模板文件index.html 和 dist 下的打包文件index.html 是不会冲突的，没有影响
实例化对象中传一个数组：
1. 数组里每一个对象都是一个赋值规则
2. from: "./public" from 相对的目录就是当前文件所在目录
3. to: "./" to相对的就是输出目录dist 所以 to后面的目录就不用再写dist了，to: “./” 表示直接放到输入目录dist 文件夹下