webpack学习记录-区分不同环境

Posted arohaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack学习记录-区分不同环境相关的知识,希望对你有一定的参考价值。

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

以上是关于webpack学习记录-区分不同环境的主要内容,如果未能解决你的问题,请参考以下文章

[20190614]webpack+vue学习记录

webpack 学习记录 开发环境

webpack学习记录

webpack学习记录

老vue项目webpack3升级到webpack5全过程记录

我的react学习之行-01webpack与react环境搭建