最近项目打包升级，将老的gulp换成webpack,然后很轻松的，增加多入口，增加rules,增加plugins好像万事大吉了。详细介绍如何一步一步自建一个,然后，由于我们是老项目，按这样打包没什么一丁点问题，然后，再开发环境，新建项目，写项目，然后发现hmr热更新发现 ，竟然要10多秒，天呐，而且发现在js里写的class竟然没打包过去。

下面就来谈谈我是怎么解决这些坑的。

1.打包后js里操作的class样式，竟然没打包到css,原因是我用了purifycss-webpack（消除冗余的css代码），但是没有忽略了扫描js源代码。这个插件确实好用哦，推荐❤️❤️❤️

2.为什么打包后，和开发环境不一样，因为开发环境没配置抽离css，所以就不会走纯净css这些插件（为了开发环境打包速度），所以需要再加个打包后的代理服务器，可以随时查看效果，改bug啊，所以又新加了script/pro.js脚本

3.最重要的，开发环境热更新要10多秒，其实多入口，webpack还是要重新打包所有入口的文件，即使你那个页面没变动，造成时间久的原因是我们devtool:用了source-map，比较耗时间，再改过配置devtool: '#cheap-module-eval-source-map'，时间快了些，8秒左右吧，然后看了html-webpack-plugin配置hash: true,好像也快了些，但是不明显。但是不是治根，现在页面才30个不到，然后再考虑要不要再抽离一个但页面入口的webpack配置，即开发的当前页面，但想着还要复制黏贴，写不同但脚本，想想麻烦（懒啊），这时候有再webpack官网看了下，竟然支持动态入口配置，so so 找到了一种比较靠谱的优化方式。文档，

简单的说就返回个promise对象。想着开发环境处理与生产有很多不同，so把开发和生产webpack分离，毕竟生产不需要动态。具体代码

entry: () => new Promise((resolve) => resolve(webpackConf.webpackEntrys())),复制代码

webpackEntrys函数

此处遇到一个坑，刚开始是传给是数组，结果整合成1个main.js不符合需求，后面改写对象传入。

注：

entry为空，则为打包所有页面，为单独string可以设置具体单独打包的页面，其实也可以传想要打包的数组

这个是开发者个人的配置，git设置忽略

config/self.config.js

module.exports = {  entry: "test",  env: "",  cookie: "",  devBaseUrl: ""}复制代码

本文完，关于（包括eslint,mock,代理，eslint,git规范化，typescript...,详见仓库readme说明）在实际项目中的继续优化，会随着项目不断更新的，本人github还有，?star