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不同的配置，会影响打包速度：

这里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/...