之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。
这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。
1.sourceMap是什么
sourceMap本质上是一个映射关系,它知道dist目录下生成的js,对应src目录下相应js的行数。sourceMap文件中是VLQ编码集合,把打包生成的代码和源代码做一个映射。
2.应用场景
我们打包后调试js时,如果控制台有报错,我们关注的不是打包后生成文件哪里报错,而是源代码中哪里报错,这个时候就会用到sourceMap。3.使用方法
首先要在 webpack.config.js中开启source-map,这样就会打包出 .map文件。3.1 例
首先,我们创建一个index.js,在文件中写一行错误的代码。
现在我们先关掉source-map(把值设为none),然后打包,打开生成的html。
点击报错信息
此时,会显示打包生成后的文件,哪里报错,但是这样不方便我们调试代码。所以我们开启source-map,重新打包。
点击报错信息
这样,就和开发时对应js文件的行数对应上了。
4.devtool的其他常用参数
除了source-map,devtool还有一些其他的配置项。
4.1 包含inline的配置参数
使用包含inline的配置项,比如inline-source-map,会将map文件中的内容通过DataURL(base64)的方式,写在打包的文件中,这样打包出的文件就不包含map文件了。
4.2 包含cheap的配置参数
在不包含cheap的配置中,map映射的报错信息会精确到某一行的某一列,但是加上cheap,就只会提示到第几行报错,可以提高打包性能。比如cheap-source-map。
另外cheap还有一个作用,它只会对我们的业务代码做映射,不会对引入的库做映射。
4.3 包含module的配置参数
包含cheap,不会对引入的库做映射,若我们想让它对引入的库也做映射,就加上module。比如cheap-module-source-map。
4.4 包含eval的配置参数
eval会通过eval()来生成map映射关系。比如eval。
4.5 推荐使用的配置项
在平常开发中,推荐使用cheap-module-eval-source-map,这样报错提示比较完全,打包速度也比较快。
而线上代码如果也需要map映射的话,推荐使用cheap-module-source-map,这样报错提示会更好一些。