从零开始的webpack生活-0x005：DefinePlugin奇妙用处

The question 发布于2019-08-21 17:28 / 1881人阅读

摘要：注意该插件是简单的字符串替换，所以如果是定义常量最好使用包裹要替换的内容，或者使用转化，否则会变成代码直接插入，比如版本号这样替换的时候就会变成而不会变成导致错误的数据格式。

0x001 概述

上一章讲的是js压缩混淆，和这一章没有半毛钱关系，这章讲的是DefinePlugin，一个好像没有用，但其实很好用的一个插件，我很喜欢，嘿嘿嘿！

0x002 插件介绍

说白了，这是一个简单的字符串替换插件，将我们所有经过webpack打包的js文件的对应的字符串都替换为我们在这个插件中指定的字符串。

0x003 栗子来了

初始化项目

+ 0x005-define-plugin
  + src
    - index.js
  - webpack.config.js

安装依赖包

$ npm init -y
$ npm install --save-dev webpack

编写webpack.config.js

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

添加插件，并指定几个常量

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.DefinePlugin({
            PRODUCTION            : JSON.stringify(true),
            VERSION               : JSON.stringify("2.0.1"),
            BROWSER_SUPPORTS_HTML5: true,
            TWO                   : "1+1",
            "typeof window"       : JSON.stringify("object"),
            不想写代码                 : JSON.stringify("i like boss"),
            弹窗一下                  : "alert("我弹窗了")"
        })
    ]
}

调用这几个变量

// src/index.js
console.log("Running App version " + VERSION);
if (!BROWSER_SUPPORTS_HTML5)
    console.log("BROWSER_SUPPORTS_HTML5")

if (PRODUCTION) {
    console.log("Production log")
}
console.log(TWO)

console.log(typeof window)

console.log(不想写代码)


弹窗一下

打包并查看打包后的结果

// dist/index.js
...
console.log("Running App version " + "2.0.1");
if (false)
    console.log("BROWSER_SUPPORTS_HTML5")

if (true) {
    console.log("Production log")
}
console.log(1+1)

console.log("object")

console.log("i like boss")

alert("我弹窗了")
...

就是这种用处了，直接将匹配的字符串替换，当然后面两句是玩笑，万万不可这么做，直接用这个插件替换逻辑会造成维护上的问题的，推荐只使用这个插件做全局的变量替换，比如在不同环境之间切换等。

更多细节，查阅webpack关于definePlugin章节。

0x004 注意

该插件是简单的字符串替换，所以如果是定义常量最好使用""包裹要替换的内容，或者使用JSON.stringify()转化，否则会变成代码直接插入，比如版本号：""1.2.1"",这样替换的时候就会变成"1.2.1",而不会变成1.2.1,导致错误的数据格式。

0x005 最佳使用搭配（使用场景而已，日后会详细说明）

git配合jenkins之类的ci做自动化发布的时候注入版本号

- 每一次`git push`就自动递增`package.json`中的版本号
- `git tag`读取`package.json`中的版本号发布新版本
- `jenkins`接收到`webhook`之后，调用`webpack`构建发布版本，`webpack`将会注入`package.json`中的版本号，让`app`中显示当前的版本
- 打包完成之后做资源上传，页面部署之类的
- 这样就让`git`版本号、`app`版本号、`package.json`版本号统一。

切换环境

- 当拥有两套环境时，比如测试环境和正式环境，我们可以定义`PRODUCTION`变量来做判定，判定当前的环境，并对此作出不同的操作，比如替换`api`地址等

0x006 资源

源代码

云服务器 GPU云服务器从零开始的邮件服务器从零开始 linux从零开始 python从零开始

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

转载请注明本文地址：https://www.ucloud.cn/yun/89564.html

从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x006：providerPlugin全局定义

摘要：插件介绍就是提供全局变量啦全局定义栗子初始化项目安装依赖包编写添加插件，并定义调用打包并用浏览器打开查看控制台全局定义自定义函数栗子添加定义添加文件调用打包并执行输出资源源代码 0x001 概述上一章讲的是definePlugin的用法，和这一章依旧没有任何关系，这一章讲的时候providerPlugin。 0x002 插件介绍就是提供全局变量啦 0x003 全局定义jquery栗...

li21 2019-08-21 17:28 评论0 收藏0
从零开始的webpack生活-0x012：TranspilingLoader装载脚本

摘要：概述上一章讲的是样式装载相关的，这一章见得是脚本加载相关的环境配置栗子加载安装依赖修改配置添加配置文件使用编写脚本打包并查看结果可以看到，语法被自动转化成了更多配置请查阅关于章节栗子加载安装依赖 0x001 概述上一章讲的是样式装载相关的loader，这一章见得是脚本加载相关的loader 0x002 环境配置 $ mkdir 0x012-transliling-loader $ c...

Tonny 2019-08-21 17:32 评论0 收藏0
从零开始的webpack生活-0x017：CustomPlugin自定义插件

摘要：概述上一章讲的是其他一些常用的小插件，这一章讲的是自定义插件。打包并查看文件更多配置请查阅关于自定义章节资源源代码 0x001 概述上一章讲的是其他一些常用的小插件，这一章讲的是自定义插件。 0x002 环境配置 $ mkdir 0x0016-other-plugin $ cd 0x0016-other-plugin $ npm init -y $ vim webpack.confi...

springDevBird 2019-08-21 17:36 评论0 收藏0
从零开始的webpack生活-0x015：ExtractTextWebpackPlugin分离样式

摘要：概述上一章讲的是，这一章讲的是依旧是没有任何关系。配合插件自动插入修改配置打包并查看它以的形式被插入头部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，请查阅关于章节资源源代码 0x001 概述上一章讲的是Dll，这一章讲的是ExtractTextWebpackPlugin,依旧是没有任何关系。 0x002 插件介绍这个插件用来将css导出到单独文件 0x003 栗子-不...

Jonathan Shieber 2019-08-21 17:29 评论0 收藏0