webpack.DefinePlugin與cross-env常用於在專案工程化中定義環境變數，webpack.DefinePlugin用於在編譯期定義環境變數，意味著在程式碼中寫上process.env.NODE_ENV不會在編譯期出現錯誤提醒；cross-env庫用於在執行時定義環境變數
DefinePlugin用來做定義。這就類似於我們專案開發中的config檔案一樣，在config檔案中一般放的是系統程式碼中的一些伺服器地址之類的公共資訊，我們將這些資訊提取出來單獨放在配置檔案中，方便於後期的維護和管理。

// dev.env.js
module.exports = {
  NODE_ENV: 'development'
}
// prod.env.js
module.exports = {
  NODE_ENV: 'production'
}

// webpack配置
const env = require('../config/dev.env')
module.exports = {
  entry: {},output: {},resolve: {
    extensions: ['.js']
  }
  module: {},plugins: [
    new webpack.DefinePlugin({
      'process.env': env.NODE_ENV
    })
  ]
}

// package.json
{
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","build": "node build/build.js","build:development": "cross-env NODE_ENV=dev node build/build.js","build:test": "cross-env NODE_ENV=test node build/build.js","build:pre": "cross-env NODE_ENV=pre node build/build.js","build:prod": "cross-env NODE_ENV=prod node build/build.js"
  }
}

到此這篇關於webpack.DefinePlugin與cross-env區別詳解的文章就介紹到這了,更多相關webpack.DefinePlugin與cross-env內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！