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

li21 发布于2019-08-21 17:28 / 2334人阅读

摘要：插件介绍就是提供全局变量啦全局定义栗子初始化项目安装依赖包编写添加插件，并定义调用打包并用浏览器打开查看控制台全局定义自定义函数栗子添加定义添加文件调用打包并执行输出资源源代码

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从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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