本章内容给大家谈谈关于遇上webpack-dev-server中如何配置使用等问题，我们该怎么处理呢。下面这篇文章将为你提供一个解决思路，希望能帮你解决到相关问题。
如何安装webpack-dev-server？在开始配置webpack-dev-server之前，需要先安装它。首先，打开终端，并进入你的项目根目录。然后，输入以下命令：
npm install webpack-dev-server --save-dev
上述命令将会安装最新版的webpack-dev-server，并将其添加到你的项目依赖中。
如何配置webpack-dev-server？安装完毕后，在webpack.config.js中进行以下配置:
1. 修改entry选项为：
entry: [
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/only-dev-server',
'./src/index.js'
]
当文件被修改后，页面将以热更新的形式重新加载。
2. 修改output选项为：
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
publicPath指的是输出文件的公共路径。因为我们将文件的实际物理路径(/dist/)与web服务器上的路径(/)分离了开来。publicPath告诉dev服务器从哪里提供文件。例如，在我们的config中，bundle.js将通过http://localhost:8080/bundle.js访问，而在dist目录上，当访问index.html时，img src被设置为
，但实际上文件物理路径并不是/index.html，而是/dist/index.html。
3. 在plugins选项中添加新实例：
plugins: [
new webpack.HotModuleReplacementPlugin()
],
这个插件将启用热重载，并替换掉webpack-dev-server默认的HotModuleReplacementPlugin。你也可以在loaders上应用此插件：
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
最后，我们需要设置启动脚本：
你可以在package.json的scripts属性中定义启动脚本：
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
--hot和--inline选项将激活热更新，并开启inline模式。启动脚本中的webpack-dev-server命令将启动服务器并监听与config中配置的端口和基本URL相同的地址。只要更改任意文件，webpack-dev-server将自动重新编译bundle.js文件，并通过webpack-dev-middleware输出到内存中。
总结
以上就是为你整理的webpack-dev-server中如何配置使用全部内容，希望文章能够帮你解决相关问题，更多请关注本站相关栏目的其它相关文章！