webpack之调试工具devServer（webpack-dev-server）的使用和配置

简述

开发中会频繁的手动构建和刷新页面，十分繁琐
这些功能我们完全可以使用webpack-dev-server插件来代替实现

作用

1. 使用node(express)创建服务，挂载打包文件，可以使得我们在浏览器上直接预览，（打包后的文件直接存放在内存中，不会生成文件，当然我们可以在页面上查看）
2. 监听文件修改，保存时，自动重新构建（当然不是所有文件都重新构建，还有缓存，速度更快）
3. 自动打开浏览器、自动刷新页面、压缩打包文件
4. 设置代理、端口号
5. 实现跨域请求
   ...

安装

• 除了在webpack.config.js文件中添加配置devServer配置外，还需要安装对应的插件 webpack-dev-server

$ npm i -D webpack-dev-server

devServer配置（参考）

• 在webpack.config.js文件中添加配置

devServer: { // 搭配 webpack-dev-server 使用
    //项目构建后的路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    port: 3000, //端口号
    open: true, //自动打开浏览器
    host: '0.0.0.0',
    disableHostCheck: true, // 绕过主机检查
    allowedHosts: // 使用localhost 127.0.0.1 默认可以访问
        'host.com', // 通过此选项，您可以将允许访问开发服务器的服务列入白名单。
    ]
    proxy: { // 代理指定url (要避开代理 devSever 与 浏览器的请求)
        '/api': {
            target:"http://localhost:8088",
            ws: true,
            changeOrigin: true
        }
    }
}

打印信息说明

i ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:workpace
odemyxxx-webpackuild
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: Hash: 25232777f205d4e12044
... 省略（参考打包信息说明）

• 第一行： 说明创建的服务地址
• 第二行： 说明生成的打包文件所挂载的目录（路由）
• 第三行： 说明生成的打包文件所挂载到服务器的路径
• 第五行： 说明本次打包Hash值

参考

webpack devServer: http://webpack.html.cn/configuration/dev-server.html