Webpack模块化打包示例
webpack 的模块化打包功能，蛮适合前端项目的资源管理和构建。在这个叫webpack-test的项目里，基本配置都写得比较清楚，适合想搞懂 Webpack 新手上路试手。
模块化写法让你可以把代码拆小块，每个模块各自维护，写起来舒服，改起来也方便。Webpack 会把这些模块打成一个或多个bundle，浏览器就能顺利跑。
入口配置写在webpack.config.js里，比如设个src/index.js作为入口文件，Webpack 从这里开始依赖关系，按图索骥，一路打包。
加载器（Loaders）挺灵活，除了 JS，像CSS、图片、字体这些也能搞定。比如你写了个.scss文件，只要配置好相应的 Loader，它就能转成浏览器认得的 CSS。
插件（Plugins）也别忽略，像HtmlWebpackPlugin，能自动把打包好的JS插进index.html，连手都不用动。
本地开发推荐用webpack-dev-server，改完代码页面自动刷新，还能热更新，调试起来贼方便。
整个项目结构也挺清晰：src放源码，dist是打包结果，配置都在webpack.config.js里。跑项目只要一条命令：webpack --config webpack.config.js，简单粗暴。
如果你之前没用过 Webpack，可以从这项目入手，边跑边改边学，慢慢就上手了。再深入一点，可以看看这些相关文章：
，Webpack 真的是个前端打包的老朋友，用得溜的话，开发效率会提高不少。如果你想更灵活地组织代码、加快打包速度，这类项目值得翻翻看。
文件大小：9.41KB
评论区