Vue-SelfSetting-Template Webpack练手模板
Vue-SelfSetting-Template 是前端工程师玩 Webpack 的练手好模板，自己配 Webpack 比用脚手架更过瘾。这个项目就是你动手配置一遍 Webpack 的绝佳机会。入口、输出、Loader、Plugin……都得自己配一遍，出错也能理解个透透的。
Webpack 的模块化打包思路，其实就像你在厨房里准备一桌菜，每道菜（模块）都有原料（源文件）和做法（loader），用 Webpack 这个大厨打包一下，整一桌子好菜端上来。嗯，比较适合想吃透 Webpack 的朋友。
像vue-loader这种专门为 Vue 服务的加载器，用了它，.vue文件里的template、script、style就能分开，开发起来挺舒服。还可以搭配vue-router和vuex，如果你想顺便练练路由和状态管理，这套模板也能照顾到。
再说说常见的 Webpack 配置。entry定义入口，output搞定打包输出路径，loaders不同格式的资源，比如babel-loader搞定 ES6 转 ES5，plugins像是自动压缩、提取 CSS 这些高级玩法就交给它们了。
resolve能配置路径别名，少打点字也少掉坑，devServer调试体验也不错，热更新（HMR）一开，改完代码页面立马刷新。externals还能排除不想打包的库，比如你用 CDN 引入的vue，直接配置一下就搞定。
还有像Tree Shaking、Code Splitting这种优化手段，都能在这个模板里试试。你也能顺便玩一下async/await、Promise这类 ES 新语法，再配合Babel转译，浏览器兼容性问题也能顺带。
如果你正想搞清楚 Webpack 的来龙去脉，又不想被脚手架喂饭，这个模板真的蛮适合自己练练的。
文件大小：67.59KB
评论区