webpack配置不同打包配置

• 生成環境與開發環境打包配置
• 使用package.json配置npm run開啟不同的打包配置

 。。。webpack基本使用最后一篇博客

在上一篇博客中詳細的演示了webpack開啟本地服務和熱更新，這個超級爽的技能你有沒有發現問題呢？反正我是發現了，那就是只適合開發環境下使用，生成環境打包顯然不合適，在前面的博客中也有提到過關於針對不同環境的打包，但沒有具體演示怎么做，其實很簡單，就是配置兩套打包配置，至於要怎么執行具體的環境打包配置不必要在這里說明，畢竟每個項目和環境還有開發配置都不同，大家針對自己的需求配置就是了，這里只告訴你怎么開啟不同打包配置命令：

配置兩個打包配置文件：

//生成環境配置--配置文件名各位自己定義（我的配置名是：webpack-dev.config.js）
module.exports = {
    mode:'development'
}

//生成環境配置--配置文件名各位自己定義（我的配置名是：webpack-prod.config.js）
module.exports = {
    mode:'production'
}

然后通過npm指令開啟不同打包配置：

webpack --config webpack-dev.config.js//開啟生成環境下的打包
webpack --config webpack-prod.config.js//開啟生成環境下的打包

是不是覺得這樣的指令敲起來很麻煩，這時候我們當然后必要將他變得簡單一點：

//在package.json文件中配置scripts
  "scripts": {
    ...
    "dev":"webpack --config webpack-dev.config.js --color",
    "prod":"webpack --config webpack-prod.config.js --color"
  },

然后執行npm run ...就可以將原本很常的一條指令用簡練的方式調用觸發了：

npm run dev//啟動開發環境打包
npm run prod//啟動生產環境打包

終於，webpack第一階段的應用博客寫完，后期慢慢研究一些關於webpack的底層實現和實際生產過程中遇到一些問題再來碼一波。