之前的配置：
每一个页面都有一个entry，而且要手动添加html-webpack-plugin
如果以后要更改页面，那么都需要手动修改，这种做法不太好
解决方法：
1. 约定 入口文件放置统一，因此可以通过js脚本去获取目录，打包的时候动态生成代码
2. 利用glob.sync， npm i glob -D
3. entry : glob.sync(path.join(__dirname. './src/*/index.js'))
具体步骤
1. 整理文件夹：将一个页面资源放入一个文件夹中，如下：index页面在index文件夹中，search页面在search文件夹中。
2.改写webpack.prod.js
利用glob获取入口文件，每个页面对应一个入口文件，每一个页面又对应一个html-webpack-pulgin
module.exports
解构得来的entry和htmlWebpackPlugins
plugins数组中：
3. npm run build
sourcemap
作用：通过source map 定位到源代码
eval:使用eval包括模块代码
source map: 产生.map文件
cheap：不包含列信息
inline：将.map作为DataURI嵌入，不单独生成.map文件 //内联到js中
module：包含loader的sourcemap
首次实践：
1. 将webpack配置的mode调成“none”
2.在module.exports的对象中添加 devtool:'eval'
使用eval会生成代码块，并且添加sourceURL，不会生成单独的source-map
3.devtool:'source-map'
4.devtool:'inline-source-map'
sourcemap加速代码调试
1. 配置webpack.dev.js
dev环境下的debugger
添加了sourcemap之后：
其他的例如cheap sourcemap方法类似
提取公共资源
基础库的分离：将react,react-dom基础包通过cdn引入，不打入bundle中
方法：使用html-webpack-externals-plugin
实战
使用webpack-externals-plugin之前，searchjs文件有2M，因为引入了react和react-dom
使用插件后：
1. npm i html-webpack-externals-plugin -D
2.修改配置
3.修改模板，添加cdn链接
4.npm run build
可以明显看出search文件只有3Kb了
使用splitChunks(webpack内置插件，不用另外安装)
1. 添加配置
注意：这里注销了sourcemap，生成的sourcemap太大了。
2. npm run build
可以看出search文件只有15k,分离出来的react/react-dom都在venders中。
