學習webpack，基本始終是圍繞：
1.如何安裝webpack
2.如何使用webpack
3.如何使用loader
4.如何使用開發服務器
可能我們會在如何使用開發服務器的時候，遇到諸如調試的相關問題：
使用開發服務器
我們webpack中使用的開發調試服務器通常是 webpack-dev-server，通過這個服務我們更多的是想實現無刷新的處理編譯入口文件。
通過以下命令全局安裝
|
1
|
npm install webpack-dev-server -g
|
啟動服務器
|
1
|
webpack-dev-server --progress --colors
|
這會綁定一個小型express服務器到localhost:8080，來為你的靜態資源及bundle（自動編譯）服務。通過訪問http://localhost:8080/webpack-dev-server/bundle，bundle每次重編譯后瀏覽器頁面都會自動更新。
但這里可能會遇到，我們改動js文件，無法實時更新的問題，很大一部分原因是沒有理解編譯后的bundle是虛擬的問題，本地其實質是沒有編譯的，所以我們不能用本地的路徑去處理，需要進行更改為http://localhost:8080/bundle.js.
我們可能預想實現無刷新是這樣的：
- js 文件修改
- webpack-dev-server 監控到變化
- webpack 重新編譯
- 實時更新瀏覽器中的頁面
但可惜的是，http://localhost:8080/index.html 對 js 文件的變化無動於衷，改完之后，手動刷新才能生效。
webpack-dev-server 提供了兩種模式用於自動刷新頁面：
-
iframe 模式
我們不訪問
http://localhost:8080，而是訪問http://localhost:8080/webpack-dev-server/index.html -
inline 模式
在命令行中指定該模式，
webpack-dev-server --inline。這樣http://localhost:8080/index.html頁面就會在 js 文件變化后自動刷新了。
由於如此我的package.json文件可能就是這樣，方便我去快速啟動
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
{
"name"
:
"react-sample"
,
"version"
:
"1.0.0"
,
"description"
:
"webpack demo"
,
"main"
:
"./src/entry.js"
,
"scripts"
: {
"start"
:
"webpack-dev-server --inline --hot"
,
"build"
:
"webpack --display-error-details"
,
"watch"
:
"webpack --progress --colors --watch"
},
"repository"
: {
"type"
:
"git"
,
"url"
:
"https://github.com/dwqs/react_practice.git"
},
"keywords"
: [
"react"
,
"webpack"
],
"author"
:
"pomy"
,
"devDependencies"
: {
"babel-core"
:
"^5.8.25"
,
"babel-loader"
:
"^5.3.2"
,
"react"
:
"^0.14.5"
,
"react-dom"
:
"^0.14.5"
,
"react-hot-loader"
:
"^1.3.0"
,
"webpack"
:
"^1.12.2"
,
"webpack-dev-server"
:
"^1.14.0"
}
}
|
解釋一下官方推薦的無刷新：
示例代碼：
package.json
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
/*build導致找不到頁面 cannot file*/
"hot": "webpack-dev-server --devtool eval --progress --colors --hot --content-base",
}
webpack.config.js
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, './src/entry.js')
]
};
官方的無刷新，其實是在前面講到的iframe實現的實時刷新，如果我們，至進行http://localhost:8080/index.html是不會進行實時刷新的。還有一點，就是官方后面加的build，作用時讓其監測，打包出bundle.js，但親測會導致，到cannot page file， 所以建議，調試完畢之后，手動打包。
最近給大家一個建議，多看官方的示例文檔，這才是快速入門的最佳渠道，webpack官方文檔。
注意：通常我們設置好webpack-dev-server服務自動刷新預覽功能之后，發現手機預覽不了，其實是由於webpack-pack-server服務安全機制導致的，只允許本機訪問，我們可以把host設置為0.0.0.0就可以允許或者設置為本機地址。
解決參考資料：stackoverflow問答 stackoverflow問答2 github isuues
參考資料：
Webpack-dev-server結合后端服務器的熱替換配置