使用`Dev Server`提高本地开发效率

开发过程：编写源代码 --> webpack打包 --> 运行应用 --> 浏览器查看

提高开发效率（webpack已经提供相应功能）

1. 使用HTTP服务运行而不是文件形式预览，一来更接近生产环境状态，二来项目使用AJAX等API

2. 修改代码后webpack自动构建，浏览器即时显示最新结果

3. 提供Source Map支持，快速定位源代码位置

webpack自动编译

使用webpack-cli提供的watch工作模式

1. 启动添加--watch参数，打包完成cli不会退出

2. 初次构建后，项目中源文件会被监视

3. 发生更改，webpack会自动重新运行打包任务

此时开发体验修改代码 → Webpack 自动打包 → 手动刷新浏览器 → 预览运行结果

需要用到serve 直接运行静态资源 serve dist

接着使用BrowserSync实现浏览器自动刷新 browser-sync dist --watch

此时开发体验 修改代码 → Webpack 自动打包 → 自动刷新浏览器 → 预览运行结果

原理：webpack监视源代码变化，自动打包，dist目录被BrowserSync监听，自动编译并刷新浏览器 例子

Webpack Dev Server

官方推出开发工具，提供开发服务器，集成自动编译和自动刷新浏览器

使用需要通过npm引入

运行webpack-dev-server过程

1. 内部启动一个Http server，为打包结果提供静态文件服务，并自动使用webpack打包我们应用

2. 监听源代码变化，变化后重新打包 image-20201113142533359.png

配置选项

devServer专门用来为webpack-dev-server提供配置

// ./webpack.config.js
const path = require('path')
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.github.com',
        pathRewrite: {
          '^/api': '' // 替换掉代理地址中的 /api
        },
        changeOrigin: true // 确保请求 GitHub 的主机名就是：api.github.com
      }
    },
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
    // ...
    // 详细配置文档：https://webpack.js.org/configuration/dev-server/
  }
}

例子

webpack常用功能

• 静态资源访问

  contentBase 指定额外的静态资源路径，类似copy-webpack-plugin

• Proxy代理

  处理跨域请求

配置webpack SourceMap

通过构建或编译之后，开发阶段编写的源代码转换为在生产环境运行的代码，这种进步同时也意味着实际运行的代码和真正编写的代码之间的差异

Source Map：映射转换后的代码与源代码之间的关系 例子
webpack配置

// ./webpack.config.js
module.exports = {
  devtool: 'source-map' // source map 设置
}