Hello Webpack! 開發模式

production是客戶端看到的完整版, 因此在production模式下我們會想要網站運行的速度越快越好, 連帶的我們打包出的bundle也應該越小越好
development模式是工程師端的開發中產品, development時由於除錯需要, 我們會想看到更多額外訊息, 速度則不是重點

在這兩種開發情境下, 需要的webpack設定就會不同

mode

webpack設定檔中的mode選項可以滿足我們根據不同開發情境設定webpack的需要

webpack.config.js

1

mode: 'none',

mode有三種選項, none, production和development, 根據不同選項webpack會幫我們採用不同plugin

看這裡

process.env.NODE_ENV 是一個webpack幫我們設定的全域變數, 對應的就是mode的值

development和production模式下, 扔的錯誤訊息會不一樣

我在index.js中呼叫一個無中生有的函式 - methodNotExist();

production

production會根據程式碼在打包好的bundle的位置來扔錯, 由於程式碼都混在一起了很難知道到底哪裡出錯

development

development則是根據打包前的位置扔錯, 也因此更好除錯

如何自動切換模式?

可以建立兩個config file, 一個給development一個給production
webpack.production.config.js

還要在npm中新增腳本, 好執行不同模式的打包

1
2
3
4
5
6
7
8
9

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
// production mode => 套用對應的設定檔
// npm run build
  "build": "webpack --config webpack.production.config.js",
// development mode
// npm run dev
  "dev": "webpack --config webpack.dev.config.js"
},

webpack dev server

在開發模式下我們會希望打包的時間越少越好, 除錯和更新才不會太耗時間, 最好能夠即寫即看, 甚至不用打包

安裝webpack dev server
npm install webpack-dev-server --save-dev

在dev.config.js中新增devserver區塊
webpack.dev.config.js

1
2
3
4
5
6
7
8
9

 devServer: {
// output的絕對路徑
   contentBase: path.resolve(__dirname, './dist'),
   index: 'index.html',
	// 要運行程式碼的port
	// http://localhost:9000
   port: 9000,

 },

修改npm腳本

1
2
3
4
5
6

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --config webpack.production.config.js",
// 由dev-server來運行                                     //熱更新
  "dev": "webpack-dev-server --config webpack.dev.config.js --hot"
},

熱更新的意思就是即改即看, 不需要重新build