webpack系列之plugin及簡樸的運用

2019年8月24日 107次阅读 来源: phping

webpack系列之plugin及簡樸的運用

一.plugin有什麼用

plugin是
webpack中心功用，經由過程
plugin（插件）webpack能夠完成
loader所不能完成的龐雜功用，運用
plugin雄厚的自定義
API，能夠掌握
webpack編譯流程的每一個環節，
完成對webpack的自定義功用擴大。

舉例

我們現實項目中就運用了HtmlWebpackPlugin插件，它協助我們做了下面幾件事兒：

  1. 在工程打包勝利後會自動天生一個html模板文件
  2. 同時所依靠的CSS/JS也都會被自動引入到這個html模板文件中
  3. 設置天生hash增加在引入文件地點的末端，類似於我們經常使用的時候戳，來處理可能會碰到的緩存題目。

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

<!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看起來大概是這個模樣：

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中的插件分為內置插件和第三方插件
  • 內置插件不須要分外裝置依靠，如上面的例子中：UglifyJsPlugin插件
  • 如果是第三方插件，如上面的例子中HtmlWebpackPlugin插件，則運用之前須要舉行裝置：
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 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]
5.檢察結果

打包勝利，能夠看到app目次下面已天生了bundle.js，翻開bundle.js會發明版權信息已加上了：
《webpack系列之plugin及簡樸的運用》

五.經常使用插件

經常使用插件

  1. BannerPlugin：對一切的文件打包后增加一個版權聲明
  2. uglifyjs-webpack-plugin： 對JS舉行緊縮殽雜
  3. HtmlWebpackPlugin：能夠依據模板自動天生html代碼，並自動援用css和js文件
  4. Hot Module Replacement：在每次修正代碼保留後，瀏覽器會自動革新，及時預覽修正後的結果
  5. copy-webpack-plugin：經由過程Webpack來拷貝文件
  6. extract-text-webpack-plugin：將js文件和css文件離別零丁打包，不混在一個文件中
  7. DefinePlugin 編譯時設置全局變量，這對開闢形式和宣布形式的構建許可差別的變量時異常有效
  8. optimize-css-assets-webpack-plugin 差別組件中反覆的css能夠快速去重
  9. 更多可點擊這裏檢察。
    原文作者：phping
    原文地址: https://segmentfault.com/a/1190000014562068
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞