WebPACKのレコード（XII）を学ぶ - 異なる環境間で区別

WebPACKのレコード（XII）を学ぶ - 異なる環境間で区別

グローバル変数を定義します。

内蔵のプラグインを使用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')
}

2つの環境設定を作成します

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