从零开始的webpack生活-0x006：providerPlugin全局定义

最新推荐文章于 2021-08-10 16:03:12 发布

weixin_33858249

最新推荐文章于 2021-08-10 16:03:12 发布

阅读量242

点赞数

文章标签： webpack javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011882883

版权

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
<!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 全局定义自定义函数栗子

添加定义

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 资源

源代码

weixin_33858249

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始的webpack生活-0x006：providerPlugin全局定义

0x001 概述上一章讲的是definePlugin的用法，和这一章依旧没有任何关系，这一章讲的时候providerPlugin。0x002 插件介绍就是提供全局变量啦0x003 全局定义jquery栗子初始化项目+ 0x006-provider-plugin + src - index.js - webp...
复制链接

扫一扫

从零开始的webpack生活-0x006：providerPlugin全局定义

0x001 概述

0x002 插件介绍

0x003 全局定义jquery栗子

0x004 全局定义自定义函数栗子

0x005 资源

“相关推荐”对你有帮助么？

0x003 全局定义`jquery`栗子