webpack教程五：插件

最新推荐文章于 2023-09-04 10:05:32 发布

不睡觉的怪叔叔

最新推荐文章于 2023-09-04 10:05:32 发布

阅读量417

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_35732147/article/details/90632326

版权

Web 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一、插件介绍

二、HtmlWebpackPlugin

三、CleanWebpackPlugin

一、插件介绍

首先，插件（Plugins）的目的在于解决loader无法实现的其他事。

webpack提供了许多的插件以支持打包时进行更多的操作。另外，除了webpack提供的原生插件，许多第三方插件也使我们的打包更加便捷。

现在我们来看两个实际打包过程中会经常用到的插件：HtmlWebpackPlugin和CleanWebpackPlugin

二、HtmlWebpackPlugin

HtmlWebpackPlugin提供哪些功能呢？概括来说就是它简化了HTML文件的创建。

我们先安装HtmlWebpackPlugin：

webpack-demo/dist/dist.html文件现在是这样的：

dist.html：

现在将这个文件删除！！

同时修改webpack.config.js：

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'bundle.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

注意：上面除了加入HtmlWebpackPlugin还将出口文件名设置为了bundle.js。

现在进行打包操作：

确实打包出了bundle.js文件，现在再查看dist文件夹：

可以发现多出来一个index.html文件，打开看看：

index.html:

index.html文件中自动引入了打包的文件bundle.js，原来HtmlWebpackPlugin插件就是帮我们构建一个html文件，且能自动引入打包文件！

可是我们原先的dist.html还有一个div元素，难道要我们自动在index.html中添加吗？

并不用，HtmlWebpackPlugin可以帮我们来做这件事情。

首先，在src文件夹中创建一个template.html：

template.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>
    <div id="webContent"></div>
</body>
</html>

修改webpack.config.js文件:

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'bundle.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.html
            template: './src/template.html'     // 模板
        })
    ]
}

现在进行打包操作：

打开dist.html:

可以发现，在HtmlWebpackPlugin自动生成的dist.html文件中果然增加了div元素，它实际上是以src文件夹中的template.html为模板来生成的。

用浏览器打开dist.html：

效果和之前一样！

三、CleanWebpackPlugin

经过前面的操作，dist文件夹中有多余的文件：

我们可以使用CleanWebpackPlugin来自动帮我们清理dist文件夹中多余的文件。

首先，安装CleanWebpackPlugin:

然后修改webpack.config.js:

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 导入CleanWebpackPlugin

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'bundle.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.html
            template: './src/template.html'     // 模板
        }),
        new CleanWebpackPlugin()
    ]
};

进行打包操作，然后再查看dist文件夹：

多余的文件被清理了！

不睡觉的怪叔叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack教程五：插件

目录一、插件介绍二、HtmlWebpackPlugin三、CleanWebpackPlugin一、插件介绍首先，插件（Plugins）的目的在于解决loader无法实现的其他事。 webpack提供了许多的插件以支持打包时进行更多的操作。另外，除了webpack提供的原生插件，许多第三方插件也使我们的打包更加便捷。现在我们来看两个实际打包过程中会经...
复制链接

扫一扫