基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境.
项目名webpackDemo；
上一节：https://blog.csdn.net/fengsh998/article/details/88074428已经把本地服务基本配置跑起来了，
这节主要是对相关的一些参数进行了解。
webpack官方文档：https://webpack.js.org/guides/development
webpack-dev-server 文档:https://webpack.js.org/configuration/dev-server
1. host : port
对访问地址和端口的配置，这里由于是本地机用'0.0.0.0'来进行说明，其实这个是开放ip地址。所以localhost一样可以访问。
...
devServer: {
contentBase: path.join(__dirname, "dist"),
overlay: true,
port: 8998,
host: '0.0.0.0'
}
...npm run dev
AdeMacBook-Pro-3:webpackdemo a$ npm run dev
> [email protected] dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack-dev-server
ℹ ｢wds｣: Project is running at http://0.0.0.0:8998/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist
ℹ ｢wdm｣: Hash: fa716775e6329044852a
...可以看到运行在0.0.0.0的8998上。同样可以打开浏览器来验证。
2. 开启压缩:compress: true
这是一个布尔型的值，当它被设置为true的时候对所有的服务器资源采用gzip压缩
采用gzip压缩的优点和缺点：
优点：对JS，CSS资源的压缩率很高，可以极大得提高文件传输的速率，从而提升web性能
缺点：服务端要对文件进行压缩，而客户端要进行解压，增加了两边的负载
3.after函数,当动作完成后触发。
...
devServer: {
contentBase: path.join(__dirname, "dist"),
overlay: true,
port: 8998,
host: '0.0.0.0',
compress: true,
after: function (app, server) {
// do fancy stuff
console.log('webserver is running.');
}
}
...运行
AdeMacBook-Pro-3:webpackdemo a$ npm run dev
> [email protected] dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack-dev-server --open
webserver is running.
ℹ ｢wds｣: Project is running at http://0.0.0.0:8998/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: wait until bundle finished: /bundle.js
ℹ ｢wdm｣: Hash: fa716775e6329044852a
Version: webpack 4.29.6
...看到第四行有输出webserver is runing. 这个正在我们在配置after时设置的callback函数 的作用。当然也不只是用来作日志输出用的啦。运用好，那是自然牛B的。
4.同样有after,也有before.
...
devServer: {
...
before: function (app, server) {
// app.get('/some/path', function(req, res) {
// res.json({ custom: 'response' });
// });
console.log('to remote server get data.');
},
...
}
...5.allowedHosts设置允许远程主机访问的白名单设置。
...
devServer: {
...
allowedHosts: [
'host.com',
'subdomain.host.com',
'subdomain2.host.com',
'host2.com'
]
}
...6.组播bonjour.
可以通过webpack-dev-server --bonjour来启用。或通过配置。
bonjour是啥东西看这里:https://baike.baidu.com/item/bonjour/9830184?fr=aladdin
具体有啥作用，还没有弄清楚。见凉。
7.clientLogLevel客户端日志级别.
string: 'none' | 'info' | 'error' | 'warning'
这几级日志级别不用多说了吧。相信同行一看就懂。
也可以通过命令行参数的方式开户webpack-dev-server --client-log-level none
8. 颜色，不过不支持配置。只支持命令行。
webpack-dev-server --color
9.contentBase 内容根目录
告诉服务器从哪里提供内容。只有在您想要提供静态文件时才需要这样做。devServer.publicPath将用于确定应该从哪里提供捆绑包，并且优先。
建议使用绝对路径。
默认情况下，它将使用您当前的工作目录来提供内容。要禁用contentBase将其设置为false。
这个key好有意思。可以作为bool值，使用false值来禁用。也可作为string，来指定路径。
也可以是个数组如：contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'assets')]
命令行： webpack-dev-server --content-base /path/to/content/dir
10.disableHostCheck
设置为true时对远程主机进行验证检测是否主机ok,官方不推荐。因为这样会有可能被远程主机作为恶意攻击被屏掉。
命令行: webpack-dev-server --disable-host-check
11.filename
这个key要在懒加载开启的情况才有效。
原文描述:
This option lets you reduce the compilations in lazy mode. By default in lazy mode, every request results in a new compilation. With filename, it's possible to only compile when a certain file is requested.
If output.filename is set to 'bundle.js' and devServer.filename is used like this:
提到在lazy模式下，可以减少编译。
这个文字和output中的filename保持一至。
...
devServer: {
...
lazy: true,
filename: 'bundle.js'
}
...12.headers 添加响应头。
这个应该是为了方便于调试用的吧。这个可能有发Ajax请求时可以看出来。
13.historyApiFallback
当页面发生404时触发，
14.hot
启用热更新功能，
请注意，webpack.HotModuleReplacementPlugin完全启用HMR是必需的。如果webpack或者webpack-dev-server使用该--hot选项启动，则会自动添加此插件，因此您可能不需要将此添加到您的webpack.config.js。
15.hotOnly
在没有页面刷新的情况下启用热模块替换
16.https
配置使用https访问，设置了开启https则需要相关的证书配置。
...
devServer: {
https: {
key: fs.readFileSync('/path/to/server.key'),
cert: fs.readFileSync('/path/to/server.crt'),
ca: fs.readFileSync('/path/to/ca.pem'),
}
...命令行：webpack-dev-server --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem
17.index
用来指定默认的文件 如
devServer: {
index: 'index.html'
}18.open
用来指定用何种浏览器打开。
19.openPage
指定打开浏览器时导航到的页面。
20.proxy
启用代理.
21.stats
状态信息，string: 'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose' object
可以设置什么样的信息在打包运行时显示。
还有好多其它属性。大伙可以看着官方名档。