Webpack Study模块打包入门
Webpack 的模块打包能力，真的挺香的。webpack.config.js是重点，一开始看着复杂，其实多试几次就顺手了。
模块化是 Webpack 的灵魂，什么 JS、CSS、图片，在它眼里通通都是模块。用import、export那套来组织代码，清晰又好维护。
入口和输出的设置关系到打包起点和生成文件位置。建议你先搞个index.js和dist/bundle.js来跑通整个流程。
加载器（Loaders）就像 Webpack 的翻译官。要让它理解 ES6、CSS、图片，就得配 Babel、css-loader、file-loader这些。虽然名字多，但安装+配置其实也就那几步。
插件（Plugins）更像是锦上添花的工具，像HtmlWebpackPlugin自动帮你生成index.html，UglifyJsPlugin还能压缩 JS，省了不少手动操作。
嗯，还有个比较实用的功能是分包（Code Splitting）。配合import()语法，可以实现按需加载，页面打开速度也能提不少。
开发阶段的话，HMR（热模块替换）是真的香。改个样式保存一下，页面就更新，效率高到飞起。
模块别名这招也别错过，像@components、@utils这种设定，能让路径引用短又直观。
Source Maps就比较偏调试了，出了 bug 能直接定位到源码行数，排查问题也更快。
别忘了用Webpack Dev Server搭个本地环境，边写边看效果，响应也快。
如果你对模块化、Babel、或者 CSS 预器感兴趣，可以看看这些相关文章，基本能把 Webpack 的生态圈串起来。
文件大小：122.57KB
评论区