webpack.DefinePlugin使用介绍

这个插件是用来定义全局变量的

//webpack.config.js
var webpack = require('webpack');
var path = require('path');module.exports = {entry: {index: "./js/index.js"},output: {path: "./dist/",filename: "js/[name].js",chunkFilename: "js/[name].js"},plugins: [new webpack.DefinePlugin({SOMETHINE: 'This is something we needed.'})]
};//index.js
console.log('SOMETHINE=',SOMETHINE);

编译完结果如下：

可以看到代码中 SOMETHINE 被直接替换为 This is something we needed. 但是我们的本意中 SOMETHINE 是一个字符串，而直接替换后却不是一个字符串。

如何换成字符串

SOMETHINE: '"This is something we needed."'
//or借助JSON.stringify
SOMETHINE: JSON.stringify('This is something we needed.')

借助JSON.stringify不仅可以处理字符串，还可以处理Object中的字符串和Array

//webpack.config.jsplugins: [new webpack.DefinePlugin({OBJ: JSON.stringify({"key1": "this is value"}),OBJ2: {"key1": "this is value"},OBJ3: {"key1": "'this is value'"},ARRAY: JSON.stringify(["value1", "value2"]),ARRAY2: ["value1", "value2"],ARRAY3: ["'value1'", "'value2'"],
// Number 和 Boolean 两种变量类型NUMBER: 12,BOOL: true})
]//index.js
console.log('OBJ=', OBJ);//  OBJ= { key1: 'this is value' }
console.log('OBJ2=', OBJ2);//报错  console.log('OBJ2=', Object({"key1":this is value}));
console.log('OBJ3=', OBJ3);// OBJ3= { key1: 'this is value' }
console.log('ARRAY=', ARRAY);// ARRAY= [ 'value1', 'value2' ]
console.log('ARRAY2=', ARRAY2);// ARRAY2= {"0":value1,"1":value2}  value1 is not defined
console.log('ARRAY3=', ARRAY3);// ARRAY3= { '0': 'value1', '1': 'value2' }
console.log(NUMBER,BOOL);// 12 true

实际应用

在实际使用中， DefinePlugin 最为常用的用途就是用来处理我们开发环境和生产环境的不同。
比如一些 debug 的功能在生产环境中需要关闭、开发环境中和生产环境中 api 地址的不同。

// webpack.dev.conf.js
var config = require('../config')
...
new webpack.DefinePlugin({'process.env': config.dev.env
})// webpack.prod.conf.js
var config = require('../config')
...
new webpack.DefinePlugin({'process.env': config.build.env
})// index.js
if ('development' === process.env.NODE_ENV) {// 开发环境下的逻辑
} else {// 生产环境下
}

webpack.DefinePlugin使用介绍相关推荐

Webpack 的简单介绍
本文介绍了一些 webpack 的核心概念以及一些概念术语,并对核心配置做了一些简单的用法讲解.建议刚刚接触 Webpack 的朋友可以先了解一下.想了解更多 Webpack 使用以及配置的话可以参考 ...
[转]WebPack 常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
WebPack常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
webpack2教程--1webpack的安装和webpack.config.js介绍
之前都是gulp之类的,现在都什么时代了!是时候学习webpack,现在都webpack4.x了,没办法,我这种弱鸡就只能webpack2开始. webpack官网文件前提安装node,安装成功, ...
webpack之DefinePlugin使用
DefinePlugin是webpack注入全局变量的插件,通常使用该插件来判别代码运行的环境变量.在使用该插件需要注意的是,如果在该插件配置了相关的参数,必须要源码中使用,webpack才会注入.例 ...
Webpack 打包 Javascript 详细介绍
本篇我们主要介绍Webpack打包Javascript.当然,除了可以打包Javascript之外,webpack还可以打包html.但是这不是我们本篇的重点.我们可以参考 Webpack HTML ...
Webpack 最佳实践总结(一)
好久没写文章,这次预计会带来3篇的 Webpack 系列文章,将会在这几天内更新完. Webpack3 自今年6月20日正式发布而来,给我们带来Scope Hoisting和Magic Comment ...
为什么我们要做三份 Webpack 配置文件
时至今日,Webpack 已经成为前端工程必备的基础工具之一,不仅被广泛用于前端工程发布前的打包,还在开发中担当本地前端资源服务器(assets server).模块热更新(hot module re ...
vue-cli的webpack模板项目配置文件分析
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修 ...

webpack.DefinePlugin使用介绍

如何换成字符串

实际应用

webpack.DefinePlugin使用介绍相关推荐

最新文章

热门文章