webpack-dev-server的配置

# webpack中webpack-dev-server的配置實現功能

 

首先是用npm下載npm install webpack-dev-server --save-dev

打開webpack.config.js添加配置信息，須要修改output，添加devServer、
plugins

//這裏要在output中寫絕對路徑
...
output:{
path:'lib',//我這裏的路徑是在lib文件夾下
publicPath:"http://127.0.0.1:8080/lib/",//感謝@向前看*_*的指出，這個屬性能夠省略
filename:'bundle.js'
},
...

...
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
progress:true,//報錯沒法識別，刪除後也能正常刷新
},
...
plugins:[
new webpack.DefinePlugin({
'process.env.NODE.ENV':"development"
}),
new webpack.HotModuleReplacementPlugin()
]
到這裏算是配置好了。接下來就是啓動它了，咱們能夠自定義個命令。在package.js中
...
"scripts": {
"start": "webpack-dev-server --inline"//這裏沒有添加-hot
},
...

保存，ok。

 

等等，好像還有一步，在入口文件的<script>標籤中將引入的bundle.js文件的地址變爲

<script type="text/javascript" src="http://127.0.0.1:8080/lib/bundle.js"></script>

 

輸入npm run start
等運行完以後，打開瀏覽器輸入http://localhost:8080/lib/index.html；而後再試試看。