webpack插件总结之DefinePlugin，ProvidePlugin

DefinePlugin

通过DefinePlugin可以定义一些全局的变量，我们可以在模块当中直接使用这些变量。无需作任何声明，看一个简单的webpack配置：

const webpack = require('webpack')
const path = require('path')

module.exports = {
	entry: {
		main: './src/main.js'
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module: {
		rules: [{
		...
		}]
	},
	plugins: [
		new webpack.DefinePlugin({
			DESCRIPTION: JSON.stringify('This is The Test Text'),
			HAS_COMPANY: true,
			COUNT: 100,
			ARRAY: JSON.stringify([1, 2, 3]),
			OBJ: JSON.stringify({name: 'xxx'})
		})
	]
}

那DefinePlugin的实用价值在哪呢？DefinePlugin通过定义不同的变量值，使我们在开发和发布的时候执行不同的代码。例如一个典型的变量process.env.NODE_ENV
new webpack.DefinePlugin({
‘process.env.NODE_ENV’: JSON.stringify(process.env.NODE_ENV)
})

DefinePlugin主要是实现开发和发布的不同处理。

ProvidePlugin

ProvidePlugin可以让我们无需引入的情况下,以全局的模式直接使用模块变量.例如,
我们在router.js中不引入vue,直接使用Vue

Vue.use(VueRouter)

打开页面的控制台报错了

Uncaught ReferenceError: Vue is not defined

因为没有引入的声明, webpack不会Vue打包进bundle.js,现在添加ProvidePlugin配置

new webpack.providePlugin({
	'Vue': 'vue'
})