Webpack之旅(二): webpack基本打包配置(Source-Map)

我们接着昨天的webpack 的内容继续： 今天我们将说一下entry,output的配置以及mode配置，最后我将为大家说到的一个概念Source Map

• 我们先将昨天我们写的一个webpack的一个基本的配置放到这里:

const path = require('path')
// 该文件需要导出webpack的配置对象
module.exports = {
	entry: path.join(__dirname, "src/main.js"),
	output: {
		filename: "bundle.js",
		path: path.join(__dirname, "dist")
	}
}

• 我们昨天说到了，entry是webpack打包文件的入口，表明webpack将对那些文件进行打包，output则是webpack打包文件的出口，声明webpack打包的文件将会被放到哪里,其中我们也说到了output里面的两个参数的含义.
• 现在我将说到的是output的第三个常用的参数的配置；publicPath
• 我们可能有这样的需求，当我们的页面中需要引入的一些文件是网络上的文件资源，或者引入的是一些外部的文件，此时我们需要我们最终打包生成的页面文件久需要加上我们引入地址的前缀，此时就可以使用publicPath参数，它会在我们打包生成的页面进行文件引入的时候为我们的引入路径自动加上该引入的前缀：
• 例: 我们配置 publicPath: “/” 则表示的是在引入的路径前加上"/" 这也是这个参数的默认的配置

---

*关于mode ，其实如它单词的含义，是一个模式的意思，表示的就是我们当前的打包配置使用什么模式进行打包， 参数值常设置为: “development” 和 “production” 分别表示的是开发模式下的打包和线上模式下的打包：

• development模式下的打包的文件不会被压缩，会带上相应的注释内容方便开发过程的调试等等的操作，而production模式的打包的代码则会被压缩成一行代码。

---

• 现在我们开始来说一下关于Source Map 的概念: 举个例子来说明一下，当我们打包的源代码中出现错误时，我们的打包的代码在运行时报错显示的错误的位置是我们错误在打包后的文件中的位置，此时我们想要排查出具体是哪个源文件中的代码出现错误时，就会很不容易，我们需要对代码进行排查的工作量也是很大的，所以Source Map的作用就出来了，它的作用其实是构建起一个打包后的代码和源代码之间的一个映射关系，此时当代码运行出错时，就可以通过这个映射关系查找到具体出错的信息在我们的源代码中的哪个位置，方便我们开发时进行处理。
• 但这里说一点就是，由于此时我们使用webpack打包是还需要生成这个Source Map映射关系的一个文件，就会导致我们的打包速度可能相较于之前会慢一些。
• 那么我们如何配置使用Source Map 呢， 在webpack的打包配置项中我们可以配置一个 devtool参数，参数值我们可以填写一个 “source-map” 参数值，此时运行打包命令后就会发现我们的打包目录下会多出一个叫做 bundle.js.map 的文件，这个文件就是我们打包代码和源代码之间的一个映射文件了。这就是==“source-map”== 参数的含义，它会为我们创建出这么一个映射关系的文件出来放到打包文件的目录下，如果我们不希望有折磨一个文件，也可以配置这个参数值为: “inline-source-map” 这个参数的含义是将我们的这个映射关系以base64字符串的形式直接写入到我们的bundle.js 这个文件的最后。
• 上面的这两的参数对于映射关系的处理都是比较精确的，即当我们的源代码中出现了错误时，它的报错信息会精确到我们源代码具体的某一行一列的摸一个字符，但是这样也会导致我们打包生成的这个source map文件的消耗会很大，打包速度就会慢很多，而在实际的开发应用中我们更多的只是需要知道我们的代码哪一行出现了错误即可，此时我们就可以在我们上面的配置参数前加上一个cheap 就可以了, 即 cheap-inline-source-map 或者 cheap-source-map 这样就可以实现我们的需求了，打包的速度也会有一定的提升
• 上面我们的一些配置实际上的映射关系只会对于我们自己的源码的一个映射关系，但是如果我们需要给我们引入的第三方的模块也有这么一个映射关的话，还可以在上面的配置项中加上一个 module 进行处理, 即： cheap-module-inline-source-map 这样的形式即可，当然我们上面说到的这些参数配置的项是可以自由进行组合的，这儿我给大家附上一张关于webapck官网上提供的devtool 的参数设置的表:
• 表中显示的slow, fast之类的表示的是配置这个参数后打包的相对快慢问题，上面的配置项中我们可以看到还有一个 eval 是我们上面没有说到的，它实际的使用含义是什么呢? 我想知道js的同学都应该知道js中有一个 eval() 函数，其实这个参数的配置就是和这个类似的，它是将我们的打包的代码后面加上我们的映射关系之接执行eval()函数得到的，如下所示:
  
  上面我们可以看到后面有一个sourceURL=…就是我们的映射关系了；eval对于我们的source-map 的映射生成而言其实效率是最高的，但是使用eval最终提示给我们的信息可能就不全面了，所以文章的最后给大家推荐在开发环境和线上环境下的devtool 的配置参数值:
  开发环境: cheap-module-eval-source-map
  线上环境: cheap-module-source-map

---

• 文章最后附上今天处理后的webpack.config.js配置文件的代码:

const path = require('path')
module.exports = {
	mode: "development",  // 还可以是production
	entry: path.join(__dirname, "src/main.js"),
	output: {
		filename: "bundle.js",
		path: path.join(__dirname, "dist")
	},
	devtool: "cheap-module-eval-source-map"
}

---

今天我们的webpack之旅就到这了，之前的博客中可能有些文字由于编写的手误敲错了一些文字，如果发现希望大家能够提出来我会及时加以改正的。下一次的webpack之旅我将为大家说到的是webpack打包之loader