webpack-dev-server的配置（方法之一）

原文：http://www.cnblogs.com/jjucap/p/5605523.html

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