webpack系列之plugin及簡單的使用

時間 2019-11-06

標籤 webpack 系列 plugin 簡單使用简体版

原文原文鏈接

webpack系列之plugin及簡單的使用

一.plugin有什麼用

plugin是 webpack核心功能，經過 plugin（插件）webpack能夠實現 loader所不能完成的複雜功能，使用 plugin豐富的自定義 API，能夠控制 webpack編譯流程的每一個環節， 實現對webpack的自定義功能擴展。

舉例

咱們實際項目中就使用了HtmlWebpackPlugin插件，它幫助咱們作了下面幾件事兒：javascript

在工程打包成功後會自動生成一個html模板文件
同時所依賴的CSS/JS也都會被自動引入到這個html模板文件中
設置生成hash添加在引入文件地址的末尾，相似於咱們經常使用的時間戳，來解決可能會遇到的緩存問題。

項目打包後生成的模板文件以下：css

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>移山</title>
  <link rel=icon href=/static/assets/favicon.ico type=image/x-icon>
  <link href=/static/css/app.37f937e3e08602bbb89778796e294cf1.css rel=stylesheet>
</head>
<body>
<div id=app>
</div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.d903c30c8b95cb48653b.js></script>
<script type=text/javascript src=/static/js/app.0c675ae0a3c300e0af57.js></script>
</body>
</html>

二.什麼是plugin

plugin是一個具備 apply方法的 js對象。 apply方法會被 webpack的 compiler（編譯器）對象調用，而且 compiler 對象可在整個 compilation（編譯）生命週期內訪問。

一個plugin看起來大概是這個樣子：html

function CustomPlugin(options){
  // options是配置文件，你能夠在這裏進行一些與options相關的工做
}

// 每一個plugin都必須定義一個apply方法，webpack會自動調用這個方法
CustomPlugin.prototype.apply = function(compiler){
    ......
    });
}

module.exports = CustomPlugin;

有興趣對自定義插件感興趣，想了解的更多的，能夠看這裏。java

三.使用plugin

在 webpack 配置文件（webpack.config.js）中，向 plugins 屬性傳入 new 實例便可。好比：webpack

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中的插件分爲內置插件和第三方插件
內置插件不須要額外安裝依賴，如上面的例子中：UglifyJsPlugin插件
若是是第三方插件，如上面的例子中HtmlWebpackPlugin插件，則使用以前須要進行安裝：

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

四.案例

在對plugin有了一個基本認識後，來作一個小案例：git

「我想對全部的文件打包後添加一個版權聲明」

目錄結構

webpackPluginDemo的目錄結構以下：
├── app
├── package-lock.json
├── package.json
├── src
│ └── index.js
└── webpack.config.jsgithub

1. 安裝`webpack`

在webpackPluginDemo根目錄下安裝webpack:web

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爲內置插件，若是是其它的外置插件，則需在使用前要先安裝。npm

4.執行打包命令

➜  webpackPluginDemo webpack
Hash: 16453f43abe665633286
Version: webpack 2.4.1
Time: 70ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.86 kB       0  [emitted]  main
   [0] ./src/index.js 210 bytes {0} [built]