webpack教程五：插件

小小小舟 2019-12-09

展开全文

一、插件介绍

二、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()
]
};