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。

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)
    })
},
...