[Webpack并不难]使用教程（四）--- devServer
使用教程（一）--- entry，devtool，output，resolve
使用教程（二）--- module.loaders
使用教程（三）--- plugins我的Webpack版本是3.10.0
DevServer （官方的文档）
- 在开发模式下，DevServer提供虚拟服务器，让我们进行开发和调试。
- 而且提供实时重新加载。简直美滋滋。大大减少开发时间。
- 它不是webpack内置插件哦，要安装！！！
// 安装
npm install webpack-dev-server --save-dev
// 在 package.json 配置下，方便使用。
"scripts": {
"dev": "webpack-dev-server" // 运行命令会自动在node_modules文件夹找 webapck-dev-server模块。
}
// webpack.config.js 配置一下 devServer
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: 'localhost',
port: 8080
}
如果没在
- package.json
配置且还是局部安装，你就要在命令行输入
node_modules/.bin/webpack-dev-server。若你 package.json 配置好了，在命令行输入npm run dev。 - 下面说说 devServer 配置中每一项有什么用。
Hot （文档）
- 热模块更新作用。即修改或模块后，保存会自动更新，页面不用刷新呈现最新的效果。
- 这不是和webpack.HotModuleReplacementPlugin （HMR）这个插件不是一样功能吗？是的，不过请注意了，
HMR这个插件是真正实现热模块更新的。而devServer里配置了hot: true, webpack会自动添加HMR插件。所以模块热更新最终还是HMR这个插件起的作用。
host （文档）
- 写主机名的。默认localhost
prot （文档）
- 端口号。默认8080
historyApiFallback （文档）
- 如果为true，页面出错不会弹出404页面。
如果为{...}, 看看一般里面有什么。
- rewrites
rewrites: [ { from: /^\/subpage/, to: '/views/subpage.html' }, { from: /^\/helloWorld\/.*$/, to: function() { return '/views/hello_world.html; } } ] // 从代码可以看出 url 匹配正则，匹配成功就到某个页面。 // 并不建议将路由写在这，一般 historyApiFallback: true 就行了。
verbose:如果true，则激活日志记录。
- disableDotRule： 禁止url带小数点
.。
compress (文档)
- 如果为true，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
contentBase （文档）
- 你要提供哪里的内容给虚拟服务器用。这里最好填绝对路径。
compress (文档)
- 如果为true，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
contentBase （文档）
- 你要提供哪里的内容给虚拟服务器用。这里最好填绝对路径。
// 单目录
contentBase: path.join(__dirname, "public")
// 多目录
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]
默认情况下，它将使用您当前的工作目录来提供内容。
Open （文档）
- true，则自动打开浏览器。
overlay (文档)
- 如果为true，在浏览器上全屏显示编译的errors或warnings。默认false（关闭）
- 如果你只想看error，不想看warning。
overlay：{
errors：true，
warnings：false
}
quiet （文档）
- true，则终端输出的只有初始启动信息。 webpack的警告和错误是不输出到终端的。
publicPath （文档）
- 配置了publicPath后，
url= '主机名' + 'publicPath配置的' +'原来的url.path'。这个其实与output.publicPath用法大同小异。 - output.publicPath是作用于js, css, img。而devServer.publicPath则作用于请求路径上的。
// devServer.publicPath
publicPath: "/assets/"
// 原本路径 --> 变换后的路径
http://localhost:8080/app.js --> http://localhost:8080/assets/app.js
proxy (文档)
- 当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url。看例子好理解。
proxy: {
'/proxy': {
target: 'http://your_api_server.com',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
- 假设你主机名为localhost:8080, 请求API的url是http：//your_api_server.com/user/list
- '/proxy'：如果点击某个按钮，触发请求API事件，这时请求url是
http：//localhost:8080/proxy/user/list。 changeOrigin：如果true，那么
http：//localhost:8080/proxy/user/listhttp：//your_api_server.com/proxy/user/list。但还不是我们要url。pathRewrite：重写路径。匹配/proxy，然后变为
''，那么url最终为http：//your_api_server.com/user/list。
watchOptions （文档）
- 一组自定义的监听模式，用来监听文件是否被改动过。
watchOptions: {
aggregateTimeout: 300,
poll: 1000，
ignored: /node_modules/
}
- aggregateTimeout：一旦第一个文件改变，在重建之前添加一个延迟。填以毫秒为单位的数字。
- ignored：观察许多文件系统会导致大量的CPU或内存使用量。可以排除一个巨大的文件夹。
- poll：填以毫秒为单位的数字。每隔（你设定的）多少时间查一下有没有文件改动过。不想启用也可以填
false。