动手写webpack配置--4.webpack-dev-server相关参数说明

基于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

可以设置什么样的信息在打包运行时显示。

还有好多其它属性。大伙可以看着官方名档。