webpack学习记录(十二)-区分不同环境

定义全局变量

使用webpack内置的插件DefinePlugin 允许创建一个在编译时可以配置的全局常量。

用法

//在webpack.config.js中配置插件
new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true)
})

//在index.js中使用定义的变量
if (!PRODUCTION) {
  console.log('Debug info')
}

if (PRODUCTION) {
  console.log('Production log')
}

创建两个环境配置

创建一个webpack.base.js, 然后在webpack.prod.js和webpack.dev.js中引入。

安装合并插件

npm i webpack-merge -D

用法

//在webpack.dev.js中使用
const {smart} = require('webpack-merge')
const base = require('webpack.base.js')

module.exports = smart(base, {
    mode: 'development'
})

之后运行时可用参数来指定配置文件。

npm run build -- --config webpack.dev.js