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。
ProvidePlugin
webpack配置ProvidePlugin后，在使用时将不再需要import和require进行引入，直接使用即可。
使用方法：在webpack.dev.conf.js和webpack.prod.conf.js中添加
plugins: [
new webpack.ProvidePlugin({
api: [path.join(__dirname, '../src/assets/js/utils.js'), 'default'],
})
]
将所有接口调用方法放在 src/assets/js/api.js中，在组件中无需import即可调用。在组件中使用：
...
mounted() {
api.getData().then(res => {
this.items = res
}).catch(err => {
console.log(err)
})
},
...
