從零開始的webpack生活-0x006：providerPlugin全局定義

li21 發(fā)布于2019-08-21 17:28 / 2412人閱讀

摘要：插件介紹就是提供全局變量啦全局定義栗子初始化項(xiàng)目安裝依賴包編寫添加插件，并定義調(diào)用打包并用瀏覽器打開查看控制臺(tái)全局定義自定義函數(shù)栗子添加定義添加文件調(diào)用打包并執(zhí)行輸出資源源代碼

0x001 概述

上一章講的是definePlugin的用法，和這一章依舊沒(méi)有任何關(guān)系，這一章講的時(shí)候providerPlugin。

0x002 插件介紹

就是提供全局變量啦

0x003 全局定義jquery栗子

初始化項(xiàng)目

+ 0x006-provider-plugin
  + src
    - index.js
  - webpack.config.js

安裝依賴包

$ cnpm init -y
$ cnpm install webpack --save-dev
$ cnpm install jquery --save

編寫webpack.config.js

var path       = require("path")
module.exports = {
    entry  : ["./src/index.js"],
    output : {
        path    : path.resolve(__dirname, "dist"),
        filename: "index.js"
    }
}

添加插件，并定義jQuery

var path       = require("path")
var webpack    = require("webpack")
module.exports = {
    entry  : ["./src/index.js"],
    output : {
        path    : path.resolve(__dirname, "dist"),
        filename: "index.js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $     : "jquery",
            jQuery: "jquery"
        })
    ]
}

調(diào)用jquery

// ./src/index.js
$(document).ready(function () {
    console.log($("#name")[0].innerHTML)
})
// ./src/index.html



    
    providerPlugin



followWinter

打包并用瀏覽器打開./src/index.html,查看控制臺(tái)

0x004 全局定義自定義函數(shù)栗子

添加定義

timestamp: [path.resolve(__dirname, "src/utils"), "default"]

添加文件./src/utils

export default function () {
    console.log(new Date().getTime())
}

調(diào)用

// ./src/index.js
timestamp()

打包并執(zhí)行

$ webpack
$ node ./dist/index.js
# 輸出
1509977476685

0x005 資源

源代碼

GPU云服務(wù)器云服務(wù)器從零開始的郵件服務(wù)器從零開始 linux從零開始 python從零開始

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

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

相關(guān)文章

從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時(shí)不能直接單純的指定輸出的文件名稱，比如，將會(huì)報(bào)錯(cuò)，可以換成以下方式指定，或者其他類似方式。如果打包過(guò)程出現(xiàn)錯(cuò)誤，比如語(yǔ)法錯(cuò)誤，將會(huì)在控制臺(tái)以紅色文字顯示，并且在你修復(fù)之后會(huì)再次打包。 0x001 概述其實(shí)我不知道怎么寫，所以決定就一塊一塊的寫點(diǎn)平常配置的過(guò)程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項(xiàng)目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評(píng)論0 收藏0
從零開始的webpack生活-0x007：CommonsChunkPlugin基本用法

摘要：概述上一章講的是，和這一章依舊沒(méi)有絲毫關(guān)系，這一章講的是說(shuō)實(shí)在的，這個(gè)插件略復(fù)雜，我還沒(méi)完全搞懂，大概是還沒(méi)到那么深我就已經(jīng)選擇其他解決方案了吧，所以這里只講一些基本用法。直接打包幾個(gè)包當(dāng)然還有許多更加復(fù)雜的用法，還請(qǐng)看關(guān)于章節(jié)資源源代碼 0x001 概述上一章講的是providerPlugin，和這一章依舊沒(méi)有絲毫關(guān)系，這一章講的是CommonsChunkPlugin,說(shuō)實(shí)在的，這...

Sleepy 2019-08-21 17:28 評(píng)論0 收藏0
從零開始的webpack生活-0x005：DefinePlugin奇妙用處

摘要：注意該插件是簡(jiǎn)單的字符串替換，所以如果是定義常量最好使用包裹要替換的內(nèi)容，或者使用轉(zhuǎn)化，否則會(huì)變成代碼直接插入，比如版本號(hào)這樣替換的時(shí)候就會(huì)變成而不會(huì)變成導(dǎo)致錯(cuò)誤的數(shù)據(jù)格式。 0x001 概述上一章講的是js壓縮混淆，和這一章沒(méi)有半毛錢關(guān)系，這章講的是DefinePlugin，一個(gè)好像沒(méi)有用，但其實(shí)很好用的一個(gè)插件，我很喜歡，嘿嘿嘿！ 0x002 插件介紹說(shuō)白了，這是一個(gè)簡(jiǎn)單的字符...

The question 2019-08-21 17:28 評(píng)論0 收藏0
從零開始的webpack生活-0x014：CustomLoader自定義loader

摘要：接下來(lái)將的本質(zhì)和自定義。環(huán)境配置這一次需要兩個(gè)項(xiàng)目，一個(gè)項(xiàng)目是，實(shí)現(xiàn)了，一個(gè)是，使用了。當(dāng)然沒(méi)有必要去真的重復(fù)制造輪子，只是為了掌握這種造輪子的技術(shù)，對(duì)理解整個(gè)工程，對(duì)理解功能提供更多思路而已。 0x001 概述上一章我們講了eslint-loader的配置，常用類型的常用loader已經(jīng)都講完了，大體上其他的都大同小異，需要去各大loader的官方查閱用戶手冊(cè)就可以了。接下來(lái)將lo...

taohonghui 2019-08-21 17:32 評(píng)論0 收藏0
從零開始的webpack生活-0x016：OtherPlugin其他常用

摘要：概述上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件和上一章是沒(méi)有任何關(guān)系。環(huán)境搭建定義環(huán)境插件介紹這個(gè)插件用來(lái)定義環(huán)境變量的，直接定義在了下。安裝依賴添加資源修改配置打包其他更多配置請(qǐng)查閱關(guān)于資源源代碼 0x001 概述上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件,和上一章是沒(méi)有任何關(guān)系。 0x002 環(huán)境搭建 $ mkdir 0x0016-other-plug...

chinafgj 2019-08-21 17:36 評(píng)論0 收藏0