webpack系列之plugin及简单的使用-白红宇

webpack系列之plugin及简单的使用

阅读量：5797 次

发布时间：2019-06-18

本文共 2462 字，大约阅读时间需要 8 分钟。

webpack系列之plugin及简单的使用

一.plugin有什么用

plugin是
webpack核心功能，通过
plugin（插件）webpack可以实现
loader所不能完成的复杂功能，使用
plugin丰富的自定义
API，可以控制
webpack编译流程的每个环节，
实现对webpack的自定义功能扩展。

举例

我们实际项目中就使用了HtmlWebpackPlugin插件，它帮助我们做了下面几件事儿：

在工程打包成功后会自动生成一个html模板文件

同时所依赖的CSS/JS也都会被自动引入到这个html模板文件中

设置生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳，来解决可能会遇到的缓存问题。

项目打包后生成的模板文件如下：

  
      移山

二.什么是plugin

plugin是一个具有
apply方法的
js对象。
apply方法会被
webpack的
compiler（编译器）对象调用，并且
compiler 对象可在整个
compilation（编译）生命周期内访问。

一个plugin看起来大概是这个样子：

function CustomPlugin(options){  // options是配置文件，你可以在这里进行一些与options相关的工作}// 每个plugin都必须定义一个apply方法，webpack会自动调用这个方法CustomPlugin.prototype.apply = function(compiler){    ......    });}module.exports = CustomPlugin;

有兴趣对自定义插件感兴趣，想了解的更多的，可以看。

三.使用plugin

在 webpack 配置文件（webpack.config.js）中，向 plugins 属性传入 new 实例即可。比如：

const HtmlWebpackPlugin = require('html-webpack-plugin');const webpack = require('webpack');module.exports = {    module: {    loaders: [      {        test: /\.(js|jsx)$/,        loader: 'babel-loader'      }    ]  },  plugins: [    new webpack.optimize.UglifyJsPlugin(), //访问内置的插件    new HtmlWebpackPlugin({template: './src/index.html'}) //访问第三方插件  ]};

注意

webpack中的插件分为内置插件和第三方插件

内置插件不需要额外安装依赖，如上面的例子中：

如果是第三方插件，如上面的例子中，则使用之前需要进行安装：

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

四.案例

在对plugin有了一个基本认识后，来做一个小案例：

“我想对所有的文件打包后添加一个版权声明”

目录结构

webpackPluginDemo的目录结构如下：

├── app

├── package-lock.json

├── package.json

├── src

│ └── index.js

└── webpack.config.js

1. 安装`webpack`

在webpackPluginDemo根目录下安装webpack:

npm install --save-dev webpack

2.入口文件`index.js`

document.write('webpack系列之plugin的基本使用！');

3.`webpack`配置文件`webpack.config.js`

const webpack = require('webpack') module.exports = {    entry:  __dirname + "/src/index.js",  //入口文件    output: {        path: __dirname + "/app",  //打包后的文件存放的地方        filename: "bundle.js" //打包后输出文件的文件名    },    plugins: [        new webpack.BannerPlugin('版权所有，翻版必究')    ],}

注意：BannerPlugin为内置插件，如果是其它的外置插件，则需在使用前要先安装。

4.执行打包命令

➜  webpackPluginDemo webpackHash: 16453f43abe665633286Version: webpack 2.4.1Time: 70ms    Asset     Size  Chunks             Chunk Namesbundle.js  2.86 kB       0  [emitted]  main   [0] ./src/index.js 210 bytes {0} [built]