开发环境

1、source map

source map: 可以将编译后的代码映射回原始代码。

当我们将多个源文件打包到一个bundle时，如果其中的一个源文件报错，那么报错就会直接指向bundle。为了准确知道错误来自于哪个源文件，js提供了source map。

在webpack配置中对应devtool选项，此选项控制是否生成以及如何生成source map。

module.exports = {
  ...,
  devtool: '(none)',
  ...
}

这里列举devtool在开发环境和生产环境下常用的选项。

+++ 非常快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢

打包后的代码：将所有生成的代码视为一大块代码，无法做到模块分离

生成后的代码：每个模块相互分离，并用模块名称进行注释。但是部分语法会转换过，比如exports，import，class等，非源代码。

原始源代码：源代码，方便调试。

eval-source-map会生成用于开发环境的最佳品质的 source map，方便调试。

(none)不生成 source map。打包成的bundle文件体积最小。

在使用上，我们需要区分mode模式，开发环境使用eval-source-map,非开发模式可以使用(none)。

合理使用source map可以优化项目，影响bundle文件体积，文件构建、重建速度等。

避免在生产中使用 inline-*** 和 eval-***，因为它们会增加 bundle 体积大小，并降低整体性能。

更多devtool选项值和配置，可以查看https://v4.webpack.docschina.org/configuration/devtool

2、自动编译

​ 正常情况下，如果对代码进行修改，需要每次运行npx webpack --config webpack.config.js来完成代码编译。webpack提供了几种可选的方式，来实现代码变化后的自动编译。

2.1 使用webpack watch mode（webpack的观察者模式）

npx webpack --watch

或者在package.json中添加script，然后运行npm run watch

"scripts": {
    "watch": "webpack --watch",
},

执行完成后，如果代码发生变化则会自动重新编译。

缺点是需要重新刷新浏览器才能看到修改后的效果。

Q1: webpack中配置了html-webpack-plugin，用于实现index.html的自动创建及bundle的动态引入。使用watch mode后，当修改文件存在问题时很容易出现index.html消失的情况。

查看plugins中是否使用了clean-webpack-plugin，clean-webpack-plugin会先清除dist下的文件，在编译过程中出现问题时会停止后续编译。

2.2 使用webpakc-dev-server

提供了一个简单的web server，并且具有实时加载的功能，及时刷新浏览器。

npm install --save-dev webpack-dev-server

webpack.config.js：

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'dist'), 
    port: 9000,
    compress: true
  },
}

contentBase:告诉服务器查找文件的位置，可以从多个目录提供内容，多个目录地址用逗号隔开。

port: server 端口号。

compress: 一切服务都启用gzip压缩。

host： 指定使用一个host，默认是localhost。如果洗完服务器外部可以访问，可以指定host

hot：是否启动模块热替换功能，值为true或者false。

open： 高度dev-server在server启动后打开浏览器，值为true或者false。

proxy: 设置代理，

devServer: {
	proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: { '^/api': '' }
    }
  }
}

这样会使/api/use代理到 http://localhost:3000/api/use

如果不想传递/api,则添加属性 pathRewrite

更多webpack-dev-server配置查看:https://v4.webpack.docschina.org/configuration/dev-server

2.3 使用 webpack-dev-middleware

封装器，可以将webpack处理的文件发送到指定server。webpack-dev-server已经包含了webpack-dev-middleware的功能

npm install --save-dev express webpack-dev-middleware

更多使用查看：https://v4.webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-middleware

Q1：webpack-dev-server与webpack-dev-middleware使用时不会在dist文件夹下生成文件。

他们在编译之后不会写入任何文件，而是将bundle文件保留到内存上，然后发送到指定的server中。