html核心插件,webpack核心，Plugins让打包更快捷

0.jpg

写在前面

前面的文章中，我们使用loader对不同的文件进行打包，也介绍了一些loader的高级配置和介绍，今天开始，我们将介绍，能让webpack打包更便捷的Plugins，也就是webpack的插件

Plugins

我们知道，在我们通常的项目中，index.html会跟随在我们的出口dist目录中的，在我们当前的目录中，如果我们删掉了dist中的index.html，重新打包后，这个文件并不会自动生成，还得需要我们手动去简历，当然，这是很不合理的，下面我们将通过插件完成这一功能，也是我们今天认识的第一个插件。

HtmlWebpackPlugin

我们参照webpack官网对他进行安装和响应的配置先。

+ const HtmlWebpackPlugin = require('html-webpack-plugin');

const path = require('path')

module.exports = {

mode: 'development',

entry: {

main: './src/index.js',

},

module: {

rules: [{

test: /\.(jpg|png|gif)$/,

use: {

loader: 'url-loader',

options: {

name: '[name]_[hash].[ext]',

outputPath: 'images/',

limit: 2048

}

}

},{

test: /\.(eot|ttf|svg|woff)$/,

use: {

loader: 'file-loader'

}

},{

test: /\.scss$/,

use: [

'style-loader',

{

loader: 'css-loader',

options: {

importLoaders: 2,

}

},

'sass-loader',

'postcss-loader'

],

}]

},

+ plugins: [new HtmlWebpackPlugin()],

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist')

},

}

这个时候我们打包试一下，这时候会发现，在dist目录下生成了一个index.html文件。并把打包后的js引入进去。那么这个插件是干嘛的呢？

HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入这个html文件中

这个时候我们打开这个html发现页面报错了，因为生成的html是没有我们逻辑中需要的root节点的。那么我们怎么才能让生成的html加入这个节点呢，这时候，我们就需要为插件配置一个模板，让他依照一个模板去打包，如下。

plugins: [new HtmlWebpackPlugin({

template: 'src/index.html'

})],

我们在src下新建一个index.html模板，这时候，htmlwebpackplugin就会依照这个模板进行打包了。打包试试吧

Plugin可以在Webapck运行到某一个时刻的时候，帮你做一些事情

这一点其实是挺像我们在开发vue或者react时候的生命周期函数。

CleanWebpackPlugin

现在大家一起跟我来操作这样的事，我们不要动之前的出口文件目录，把配置中的出口文件改一个名字，然后打包，你会发现dist目录下会新生成一个js文件。而我们之前的bundle.js并没有被删除。这样有时候就会造成一些问题。我们希望的是在打包的时候，先将dist目录删除，然后再执行打包，这就需要我们的CleanWebpackPlugin,我们按照文档先安装，再做出相应的配置。

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

plugins: [

new HtmlWebpackPlugin({

template: 'src/index.html'

}),

new CleanWebpackPlugin()

],

这个时候再打包就会发现dist目录是先删除后更新的了。

写在后面

通过本节的讲解，我们已经对Plugin有了一点的认识，他是基于Webapck打包事件流的，在打包的某一个节点上对打包内容做一些操作。本节只列举了几个例子，其实webpack的插件非常之多，大家看官网就可以看到，当然还有一些第三方的插件，大家知道Webapck插件的基本用法，以后用到哪些插件，查看相关文档即可，也没必要把所有的API都看一遍。