webpack學習筆記-開發(提升開發效率)

本指南中的工具僅用於開發環境，請不要在生產環境中使用它們！

 

使用 source map:追蹤到錯誤和警告在源代碼中的原始位置

source map 有不少不一樣的選項可用，請務必仔細閱讀它們,對於本指南，咱們使用 inline-source-map 選項

webpack.js添加配置項:devtool: 'inline-source-map',

 

加上這一行,代碼就會提示源代碼哪裏出錯，不然就是很難讀的那種!

 

選擇一個開發工具

1:webpack's Watch Mode:npm run watch

惟一的缺點是，爲了看到修改後的實際效果，你須要刷新瀏覽器。

若是可以自動刷新瀏覽器就更好了，能夠嘗試使用 webpack-dev-server，剛好能夠實現咱們想要的功能

 

2:webpack-dev-server:簡單web服務器,實時加載

npm install --save-dev webpack-dev-server

安裝完畢:須要告訴webpack在哪裏找文件

 

 添加啓動腳本,啓動開發服務器:

能夠配置端口和是否壓縮"start": "webpack-dev-server --open",

devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000 }

 

3:webpack-dev-middleware

webpack-dev-middleware 是一個容器(wrapper)，它能夠把 webpack 處理後的文件傳遞給一個服務器(server)。 

webpack-dev-server 在內部使用了它，

同時，它也能夠做爲一個單獨的包來使用，以便進行更多自定義設置來實現更多的需求。

接下來是一個 webpack-dev-middleware 配合 express server 的示例。

首先，安裝 express 和 webpack-dev-middleware：

npm install --save-dev express webpack-dev-middleware

 

 

下一章節:模塊熱更換!