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

li21 發布于2019-08-21 17:28 / 2336人閱讀

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

0x001 概述

上一章講的是definePlugin的用法，和這一章依舊沒有任何關系，這一章講的時候providerPlugin。

0x002 插件介紹

就是提供全局變量啦

0x003 全局定義jquery栗子

初始化項目

+ 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"
        })
    ]
}

調用jquery

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



    
    providerPlugin



followWinter

打包并用瀏覽器打開./src/index.html,查看控制臺

0x004 全局定義自定義函數栗子

添加定義

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

添加文件./src/utils

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

調用

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

打包并執行

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

0x005 資源

源代碼

云服務器 GPU云服務器從零開始的郵件服務器從零開始 linux從零開始 python從零開始

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

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

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

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

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

摘要：概述上一章講的是，和這一章依舊沒有絲毫關系，這一章講的是說實在的，這個插件略復雜，我還沒完全搞懂，大概是還沒到那么深我就已經選擇其他解決方案了吧，所以這里只講一些基本用法。直接打包幾個包當然還有許多更加復雜的用法，還請看關于章節資源源代碼 0x001 概述上一章講的是providerPlugin，和這一章依舊沒有絲毫關系，這一章講的是CommonsChunkPlugin,說實在的，這...

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

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

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

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

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

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

chinafgj 2019-08-21 17:36 評論0 收藏0