亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

webpack系列之plugin及簡(jiǎn)單的使用

TesterHome / 2870人閱讀

摘要：系列之及簡(jiǎn)單的使用一有什么用是核心功能，通過插件可以實(shí)現(xiàn)所不能完成的復(fù)雜功能，使用豐富的自定義，可以控制編譯流程的每個(gè)環(huán)節(jié)，實(shí)現(xiàn)對(duì)的自定義功能擴(kuò)展。三使用在配置文件中，向?qū)傩詡魅雽?shí)例即可。

webpack系列之plugin及簡(jiǎn)單的使用 一.plugin有什么用 
plugin是webpack核心功能，通過plugin（插件）webpack可以實(shí)現(xiàn)loader所不能完成的復(fù)雜功能，使用plugin豐富的自定義API，可以控制webpack編譯流程的每個(gè)環(huán)節(jié)，實(shí)現(xiàn)對(duì)webpack的自定義功能擴(kuò)展。
舉例

我們實(shí)際項(xiàng)目中就使用了HtmlWebpackPlugin插件，它幫助我們做了下面幾件事兒：

在工程打包成功后會(huì)自動(dòng)生成一個(gè)html模板文件

同時(shí)所依賴的CSS/JS也都會(huì)被自動(dòng)引入到這個(gè)html模板文件中

設(shè)置生成hash添加在引入文件地址的末尾，類似于我們常用的時(shí)間戳，來解決可能會(huì)遇到的緩存問題。

項(xiàng)目打包后生成的模板文件如下：




  
  移山
二.什么是plugin 
plugin是一個(gè)具有 apply方法的 js對(duì)象。 apply方法會(huì)被 webpack的 compiler（編譯器）對(duì)象調(diào)用，并且 compiler 對(duì)象可在整個(gè) compilation（編譯）生命周期內(nèi)訪問。

一個(gè)plugin看起來大概是這個(gè)樣子：

function CustomPlugin(options){
  // options是配置文件，你可以在這里進(jìn)行一些與options相關(guān)的工作
}

// 每個(gè)plugin都必須定義一個(gè)apply方法，webpack會(huì)自動(dòng)調(diào)用這個(gè)方法
CustomPlugin.prototype.apply = function(compiler){
    ......
    });
}

module.exports = CustomPlugin;

有興趣對(duì)自定義插件感興趣，想了解的更多的，可以看這里。

三.使用plugin

在 webpack 配置文件（webpack.config.js）中，向 plugins 屬性傳入 new 實(shí)例即可。比如：

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(), //訪問內(nèi)置的插件
    new HtmlWebpackPlugin({template: "./src/index.html"}) //訪問第三方插件
  ]
};
注意

webpack中的插件分為內(nèi)置插件和第三方插件

內(nèi)置插件不需要額外安裝依賴，如上面的例子中：UglifyJsPlugin插件

如果是第三方插件，如上面的例子中HtmlWebpackPlugin插件，則使用之前需要進(jìn)行安裝：

npm install html-webpack-plugin --save-dev
四.案例

在對(duì)plugin有了一個(gè)基本認(rèn)識(shí)后，來做一個(gè)小案例：

“我想對(duì)所有的文件打包后添加一個(gè)版權(quán)聲明”
目錄結(jié)構(gòu)

webpackPluginDemo的目錄結(jié)構(gòu)如下：
├── 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("版權(quán)所有，翻版必究")
    ],
}

注意：BannerPlugin為內(nèi)置插件，如果是其它的外置插件，則需在使用前要先安裝。

4.執(zhí)行打包命令
?  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.查看結(jié)果

打包成功，可以看到app目錄下面已經(jīng)生成了bundle.js，打開bundle.js會(huì)發(fā)現(xiàn)版權(quán)信息已經(jīng)加上了：

五.常用插件 常用插件

BannerPlugin：對(duì)所有的文件打包后添加一個(gè)版權(quán)聲明

uglifyjs-webpack-plugin： 對(duì)JS進(jìn)行壓縮混淆

HtmlWebpackPlugin：可以根據(jù)模板自動(dòng)生成html代碼，并自動(dòng)引用css和js文件

Hot Module Replacement：在每次修改代碼保存后，瀏覽器會(huì)自動(dòng)刷新，實(shí)時(shí)預(yù)覽修改后的效果

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

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

DefinePlugin 編譯時(shí)配置全局變量，這對(duì)開發(fā)模式和發(fā)布模式的構(gòu)建允許不同的變量時(shí)非常有用

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

更多可點(diǎn)擊這里查看。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94545.html

相關(guān)文章

  • webpack系列之loader的基本使用

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

    xiaoxiaozi 評(píng)論0 收藏0

  • [js高手之路]深入淺出webpack教程系列5-插件使用之html-webpack-plugin配

    摘要：上文我們講到了的配置和獲取數(shù)據(jù)的方式，本文，我們繼續(xù)深入的配置一插件中的除了自己定義了一些基本配置外，我們是可以任意的添加自定義的數(shù)據(jù)文件，就是當(dāng)前文件所在的絕對(duì)路徑輸出路徑，要用絕對(duì)路徑打包之后輸出的文件名教你學(xué)我們?cè)谥行略隽藗€(gè) 上文我們講到了options的配置和獲取數(shù)據(jù)的方式，本文，我們繼續(xù)深入options的配置 一、html-webpack-plugin插件中的options...

    lentoo 評(píng)論0 收藏0

  • [js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配

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

    qpal 評(píng)論0 收藏0

  • [js高手之路]深入淺出webpack教程系列6-插件使用之html-webpack-plugin配

    摘要：上文我們對(duì)的實(shí)例進(jìn)行了遍歷分析，講解了幾個(gè)常用屬性以及自定義屬性的添加，本文，我們繼續(xù)深入他的配置選項(xiàng)的探討一選項(xiàng)這個(gè)屬性非常有用，可以指定某個(gè)頁面加載哪些如文件我們可以用他做多個(gè)頁面模板的生成比如，我們?cè)趯?shí)際開發(fā)中，做一個(gè)博客網(wǎng)站，一 上文我們對(duì)html-webpack-plugin的實(shí)例htmlWebpackPlugin進(jìn)行了遍歷分析，講解了幾個(gè)常用屬性( inject, mini...

    jokester 評(píng)論0 收藏0

  • 使用 TypeScript 改造構(gòu)建工具及測(cè)試用例

    摘要：第一個(gè)完全使用重構(gòu)的純項(xiàng)目已經(jīng)上線并穩(wěn)定運(yùn)行了。測(cè)試用例的改造前邊的改為大多數(shù)原因是因?yàn)閺?qiáng)迫癥所致。但是測(cè)試用例的改造則是一個(gè)能極大提高效率的操作。 最近的一段時(shí)間一直在搞TypeScript，一個(gè)巨硬出品、賦予JavaScript語言靜態(tài)類型和編譯的語言。 第一個(gè)完全使用TypeScript重構(gòu)的純Node.js項(xiàng)目已經(jīng)上線并穩(wěn)定運(yùn)行了。 第二個(gè)前后端的項(xiàng)目目前也在重構(gòu)中，關(guān)于前...

    Cristic 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<