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

時間 2019-11-16

標籤開始 webpack 生活 0x006 providerplugin 全局定義欄目悠閒生活简体版

原文原文鏈接

0x001 概述

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

0x002 插件介紹

就是提供全局變量啦node

0x003 全局定義`jquery`栗子

初始化項目jquery

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

安裝依賴包webpack

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

編寫webpack.config.jsgit

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

添加插件，並定義jQuerygithub

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'
        })
    ]
}

調用jqueryweb

// ./src/index.js
$(document).ready(function () {
    console.log($('#name')[0].innerHTML)
})
// ./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>providerPlugin</title>

</head>
<body>
<p id="name">followWinter</p>
</body>
<script src="./../dist/index.js"></script>
</html>

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

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

添加定義npm

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

添加文件./src/utilssegmentfault

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

調用瀏覽器
```
// ./src/index.js
timestamp()
```

打包並執行

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

0x005 資源

源代碼

相關標籤/搜索