webpack的DefinePlugin插件

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({
            DEBUG: process.env.NODE_ENV === 'debug'
        })
    ]
};DEBUG

//index.js
console.log('DEBUG=',DEBUG);

可以得到，DEBUG=true 或 false

实际应用：

在应用中，DefinePlugin最长用来处理开发环境和生产环境的问题

比如一些debug在开发环境中有效，但是在生产环境中需要去掉

// 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 {
 // 生产环境下
}