(掌握)webpack插件-Define插件

DefinePlugin的介绍

• 但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：

• 这是因为在编译template模块时，有一个BASE_URL：

  • <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    

  • 但是我们并没有设置过这个常量值，所以会出现没有定义的错误

• 这个时候我们可以使用DefinePlugin插件

DefinePlugin的使用

• DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

const {DefinePlugin} = require('webpack');

module.exports = {
  //其他省略
  plugins:[
    new DefinePlugin({
      //作用：直接注入全局，你可以在任何一个地方使用它
      BASE_URL:'"./"'//因为是会将里面的内容直接当作一个代码来执行的，所以内部还需要""将./括起来才表示字符串
      XiaoYu:"'小余全局都能看到'"
    })//因为插件都是类，所以需要使用new来构造使用
  ]
}

//随意一个文件，使用用过DefinePlugin注入的变量
console.log(XiaoYu)//小余全局都能看到，不需要声明就可以直接打印，因为我们已经注入全局了

//判断是开发环境还是生产环境
console.log(process.env.NODE_DNV)

• 这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值；