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'
})