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；然后再試試看。