插件(Plugins)是用来拓展webpack功能的, 用于完成一些 loader 不能完成的工作。
Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程其作用。
webpack 有很多内置的插件,本篇主要介绍webpack的内置插件BannerPlugin和第三方插件HtmlWebpackPlugin
一、BannerPlugin
接上一节的代码,我们来写一个给打包后代码添加版权声明的插件。
先安装webpack插件1
2
3$ npm i webpack -D
// 注意webpack4.0以后,将命令行工具分离出来webpack-cli, 本篇依赖的版本是3.11, 指定webpack的版本命令如下
$ npm i webpack@3.11.0
在webpack.config.js中添加plugins
1 | const webpack = require('webpack'); |
执行webpack命令,打包后的js文件如下
本实例源码
二、html-webpack-plugin
这是个第三方插件,需要安装,这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。
先安装插件
1 | $ npm i html-webpack-plugin -D |
删除index.html模板中的script脚本引用,配置webpack.config.js如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: __dirname + '/dist', // 将输出放到dist文件夹
filename: 'app-[hash].js'
},
module: {
rules: [
{ test: /\.css$/,
use: ['style-loader', 'css-loader?minimize'],
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/index.html"//new 一个这个插件的实例,并传入相关的参数
})
],
}
最后执行webpack命令,会生成dist文件夹下 app.js 和 index.html,
本实例源码
三、 extract-text-webpack-plugin
在上一篇中通过 Loader 加载了 CSS 文件,本节将通过 Plugin 把注入到 app.js 文件里的 CSS 提取到单独的文件中,配置修改如下:
1 | const webpack = require('webpack'); |
安装插件
1 | $ npm i extract-text-webpack-plugin -D |
最后执行 webpack 后,会在dist下生成main_[hash].css, 并且 index.html 多出了一行:
1 | <link href="main_2729b3b7.css" rel="stylesheet"> |
最后在浏览器打开试试, 跟前面的效果是一样的。1
2$ cd ./dist
$ http-server
本实例源码