配置內置環境
啓動webpack內置環境以後每次修改都會自動打包，在這一步將配置瀏覽器的自動刷新，讓其更加自動化。
- 修改package.json 的 scripts 部分
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
}在命令行裏運行 npm run dev 的時候就會執行 dev 屬性裏的值
1.webpack-dev-server - 在 localhost:8080 建立一個 Web 服務器
2.--devtool eval - 爲你的代碼創建源地址。當有任何報錯的時候可以讓你更加精確地定位到文件和行號
3.--progress - 顯示合併代碼進度
4.--colors - 命令行中顯示顏色！
5.--content-base build - 指向設置的輸出目錄
運行 npm run dev 啓動 Web 服務器
訪問 http://localhost:8080 看效果
瀏覽器自動刷新
運行 webpack-dev-server 的時候，它會監聽你的文件修改。當項目重新合併之後，會通知瀏覽器刷新。爲了能夠觸發這樣的行爲，你需要把你的 index.html 放到 build/ 文件夾下，然後做這樣的修改：
build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>增加一個腳本當發生改動的時候去自動刷新應用，你需要在配置中增加一個入口點。
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'app/entry.js')
],
output: {
path: path.resolve(__dirname,'build'),
filename: 'bundle.js'
},
}這樣瀏覽器的自動刷新就OK了。
