Webpack registro (XII) aprendendo - distinguir entre diferentes ambientes

Webpack registro (XII) aprendendo - distinguir entre diferentes ambientes

Definir variáveis ​​globais

Webpack usar o built-in plug-in permite que você crie um DefinePlugin em compilar constantes globais podem ser configurados quando.

uso

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

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

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

Criar dois configuração do ambiente

Criar um webpack.base.js, e, em seguida, introduzido em webpack.prod.js webpack.dev.js no.

O plug-in instalação combinada

npm i webpack-merge -D

uso

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

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

parâmetro disponível para especificar o arquivo de configuração para ser executado após o tempo.

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