DefinePlugin

通過DefinePlugin可以定義一些全局的變量，我們可以在模塊當(dāng)中直接使用這些變量，無需作任何聲明。常見的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的應(yīng)用價值：DefinePlugin通過定義不同的變量值，使我們在開發(fā)和發(fā)布的時候執(zhí)行不同的代碼。例如一個典型的變量process.env.NODE_ENV。

ProvidePlugin

webpack配置ProvidePlugin后，在使用時將不再需要import和require進(jìn)行引入，直接使用即可。
使用方法：在webpack.dev.conf.js和webpack.prod.conf.js中添加

 plugins: [
      new webpack.ProvidePlugin({
        api: [path.join(__dirname, '../src/assets/js/utils.js'), 'default'],
      })
]

將所有接口調(diào)用方法放在 src/assets/js/api.js中，在組件中無需import即可調(diào)用。在組件中使用：

...
mounted() {
    api.getData().then(res => {
      this.items = res
    }).catch(err => {
      console.log(err)
    })
},
...