Webpack的核心概念-entry、output与sourceMap

1.entry与ouput的基本配置

这里我们继续讲解一下这两个配置项:

...
entry:{
    main:'./src/index.js'
},
...
output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'dist')
}

1.1 打包多个文件并输出

我们有一个新的需求,希望把index.js打包两次,分别生成两个文件,一个叫main,第二次叫sub,这里entry可以这样配置:

entry:{
    main:'./src/index.js',
    sub:'./src/index.js'
}

这里直接打包肯定失败的,因为我们的output的filename只有一个bundle.js文件,能不能根据entry的配置来自动生成output,可以利用占位符:

output:{
    filename:'[name].js'
}

同时webpack会自动把这两个js文件引入到生成的index.html中:

// index.html
...

1.2 为HTML的JS引用添加公共域名

这样一个场景,打包完的index.html文件会给后端,作为网页入口文件,而那些js文件会上传到CDN中,网页加载的时候再拉下来。

这时候我们就希望打包完成的index.html能够自动索引到JS文件地址,加上CDN域名:

// index.html
...

我们就可以配置output的publicPath配置项:

output:{
    publicPath:'http://cdn.com.cn/
    ...
}

其他更多的配置项都可以参考官方文档来深入学习~

2. sourceMap的配置

2.1 什么是sourceMap

sourceMap其实是描述的一种映射关系(基于map文件),当你的代码出错的时候,不打开sourceMap的话出错行只会定位到打包后的JS文件的位置。

如果你想要打包后debug的log也能定位到源代码的行数时就需要打开sourceMAp了

例如:他知道dist目录下面的main.js文件的96行实际上对应src目录下index.js文件中的第1行!

2.2 sourceMap的使用

development状态下sourceMap默认是开启的,但是你可以通过配置devtool字段来配置不同模式:

module.exports = {
    ...
    devtool:'none' //关闭sourcemap
}

devtool不同的参数代表了sourcemap不同的配置,会影响打包速度:

Webpack的核心概念-entry、output与sourceMap_第1张图片

这里build代码配置devtool不同项之后build速度会如何变化,配置source-map会影响打包速度,但是对于debug有用。

并且我们在打包目录下面会发现一个main.js.map文件,他其实就通过这个文件做了一个映射

2.3 其他类型SourceMap配置介绍

inline-source-map

配置了这个devtool之后其实就是把main.js.map配置成一个base64的字符串放到main.js的底部

cheap-inline-source-map

这里我们看一下cheap这个前缀,其实这些都可以自由组合。

乍看一下好像没什么区别,但是这个cheap实际上代表map源代码的精确度,不加cheap会告诉你在源代码哪一行哪个字符出错了。加了cheap只会告诉你哪一行。

这样其实打包性能会有提高,尤其是打包源代码很多的时候!这也是为什么cheap的build是fast的意思。

同时也不会管非业务代码的错误,例如loader里面的,第三方模块里面映射的。

cheap-module-source-map

这个module前缀意思就是仍然会管理loader,第三方模块里面的错误~

eval前缀

eval是打包类型最快的方式,乍看好像打包完也没啥区别。

我们看一下dist目录中发现没有了map文件,底部也没有base64,但是存在一个eval函数,他其实是通过eval这个函数来执行的,打包速度很快,但是对于复杂的代码这种方式可能错误提示不全面。

2.4 最佳实践

考虑到我们在开发环境对sourceMap的要求是:快(eval),信息全(module),且由于此时代码未压缩,我们并不那么在意代码列信息(cheap),开发环境下最好是使用:cheap-module-eval-source-map,这种方式提示较全,打包速度快。

线上环境(mode为production),一般不需要一个sourceMap的映射,但是也希望能快速定位问题,我们可以配置一个cheap-module-source-map。

如果你并不希望任何人都可以在浏览器直接看到我们未编译的源码,不应该直接提供sourceMap给浏览器。但我们又需要sourceMap来定位我们的错误信息, 这时我们可以设置hidden-source-map:
一方面webpack会生成sourcemap文件以提供给错误收集工具比如sentry,另一方面又不会为 bundle 添加引用注释,以避免浏览器使用。

这一块记得这个最佳实践就差不多了。

2.5 映射原理

这里感兴趣了解原理的同学可以参考这里深入学习一下:
https://zhuanlan.zhihu.com/p/...

你可能感兴趣的:(Webpack的核心概念-entry、output与sourceMap)