webpack入门二 —— plugin插件机制

最新推荐文章于 2023-08-31 16:43:24 发布

K.P

最新推荐文章于 2023-08-31 16:43:24 发布

阅读量222

点赞数 1

本文链接：https://blog.csdn.net/weixin_44314609/article/details/106174840

版权

npm 同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

webpack

8 篇文章 0 订阅

订阅专栏

上一章webpack的loader，我们已经自己测试并开发了一个样品，这次我们了解下plugin（插件）的用法及运行机制。
基础的搭建这里就不再说了，可以直接看上一章
搭建完后，还是老规矩，放图片路径
在这里插入图片描述
在src中创建main.js，内容随意编写

console.log('plugin')

需求一：自动清除dist的插件

首先，谈谈需求，每次重新运行打包，都会覆盖之前的dist，但并非删除，这显然不是我们所要的结果，因此，引入在每次打包之前自动清除dist的插件，就必不可少的；
第一步，安装

npm install clean-webpack-plugin --save-dev

// ./webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'none',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js'
    },
    plugins:[
        new CleanWebpackPlugin()
    ]
}

配置完毕后，运行，如果这时候有报错，有个情况大概就是需要设置目标的运行环境，在配置中加

 target:'node',  // 目标指定一个环境

这时，最基本的plugin就运用就完成了~~~

需求二：打包生成html的插件

安装

npm install html-webpack-plugin --save-dev

webpack.confg.js 配置

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 与 clean-webpack-plugin 不同
// html-webpack-plugin插件默认导出的就是插件类型，不需要再结构内部成员
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
     target:'node',  // 目标指定一个环境
    output: {
        filename: 'bundle.js'
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin()
    ]
}

需求三：动态改变打包后的index.html

方法一：适合场景，需要少量自定义配置
给index.html设置title、meta等属性

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 与 clean-webpack-plugin 不同
// html-webpack-plugin插件默认导出的就是插件类型，不需要再结构内部成员
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
     target:'node',  // 目标指定一个环境
    output: {
        filename: 'bundle.js'
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Webpack Plugin Sample',
            meta:{
                viewport: 'width=device-width'
            }
        })
    ]
}

打包后的index.html
方法二：定义模板适用于大量自定义配置
在src目录中添加index.html (自定义模板）

// ./src/index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--  需要动态显示的 使用 <%= %>  --> 
    <title><%=htmlWebpackPlugin.options.title%></title>     
</head>

<body>
    <div class="container">
        <h1>6666 bro gogogo!!!</h1>
        <div class="root"></div>
    </div>
</body>

</html>

webpack配置

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 与 clean-webpack-plugin 不同
// html-webpack-plugin插件默认导出的就是插件类型，不需要再结构内部成员
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js'
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Webpack Plugin Sample11111',
            // 添加模板
            template: './src/index.html'
        })
    ]
}