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学习记录-区分不同环境的主要内容,如果未能解决你的问题,请参考以下文章