webpack系列之plugin及簡單的使用

TesterHome 發布于2019-08-22 16:39 / 2801人閱讀

摘要：系列之及簡單的使用一有什么用是核心功能，通過插件可以實現所不能完成的復雜功能，使用豐富的自定義，可以控制編譯流程的每個環節，實現對的自定義功能擴展。三使用在配置文件中，向屬性傳入實例即可。

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中的插件分為內置插件和第三方插件

內置插件不需要額外安裝依賴，如上面的例子中：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會發現版權信息已經加上了：

五.常用插件 常用插件

uglifyjs-webpack-plugin：對JS進行壓縮混淆

HtmlWebpackPlugin：可以根據模板自動生成html代碼，并自動引用css和js文件

Hot Module Replacement：在每次修改代碼保存后，瀏覽器會自動刷新，實時預覽修改后的效果

copy-webpack-plugin：通過Webpack來拷貝文件

extract-text-webpack-plugin：將js文件和css文件分別多帶帶打包，不混在一個文件中

DefinePlugin 編譯時配置全局變量，這對開發模式和發布模式的構建允許不同的變量時非常有用

optimize-css-assets-webpack-plugin 不同組件中重復的css可以快速去重

更多可點擊這里查看。

云服務器 GPU云服務器云服務器的產品系列及服務系列之系列之二架構之坑系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94545.html

webpack系列之loader的基本使用

摘要：由于本篇我們只講的基本使用，故這里不再深入講解，有興趣的可以點擊這里學習。使用的方式有三種使用方式，如下配置推薦在文件中指定。下一篇會給大家介紹系列之及簡單的使用歡迎大家訪問我的github blog查看更多文章 webpack系列之loader及簡單的使用一. loader有什么用 webpack本身只能打包Javascript文件，對于其他資源例如 css，圖片，或者其他的語...

xiaoxiaozi 2019-08-22 16:21 評論0 收藏0
[js高手之路]深入淺出webpack教程系列5-插件使用之html-webpack-plugin配

摘要：上文我們講到了的配置和獲取數據的方式，本文，我們繼續深入的配置一插件中的除了自己定義了一些基本配置外，我們是可以任意的添加自定義的數據文件，就是當前文件所在的絕對路徑輸出路徑，要用絕對路徑打包之后輸出的文件名教你學我們在中新增了個上文我們講到了options的配置和獲取數據的方式，本文，我們繼續深入options的配置一、html-webpack-plugin插件中的options...

lentoo 2019-08-22 11:10 評論0 收藏0
[js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配

摘要：還記得我們上文中的文件嗎那里面的標簽還是寫死的文件，那么怎么把他們變成動態的文件，這個動態生成的文件會動態引入我們打包后生成的文件呢，我們可以使用插件，首先安裝這個插件，好的，接下來就開始用這個插件了官方參考文檔插件通用用法還記得我們上文中的index.html文件嗎? 那里面的script標簽還是寫死的index.bundle.js文件，那么怎么把他們變成動態的index.html...

qpal 2019-08-22 11:08 評論0 收藏0
[js高手之路]深入淺出webpack教程系列6-插件使用之html-webpack-plugin配

摘要：上文我們對的實例進行了遍歷分析，講解了幾個常用屬性以及自定義屬性的添加，本文，我們繼續深入他的配置選項的探討一選項這個屬性非常有用，可以指定某個頁面加載哪些如文件我們可以用他做多個頁面模板的生成比如，我們在實際開發中，做一個博客網站，一上文我們對html-webpack-plugin的實例htmlWebpackPlugin進行了遍歷分析，講解了幾個常用屬性( inject, mini...

jokester 2019-08-22 11:11 評論0 收藏0
使用 TypeScript 改造構建工具及測試用例

摘要：第一個完全使用重構的純項目已經上線并穩定運行了。測試用例的改造前邊的改為大多數原因是因為強迫癥所致。但是測試用例的改造則是一個能極大提高效率的操作。最近的一段時間一直在搞TypeScript，一個巨硬出品、賦予JavaScript語言靜態類型和編譯的語言。第一個完全使用TypeScript重構的純Node.js項目已經上線并穩定運行了。第二個前后端的項目目前也在重構中，關于前...

Cristic 2019-08-23 11:41 評論0 收藏0