基于webpack的前端工程化开发解决方案探索（二）：代码分割与图片加载

　　今天我们继续来进行webpack工程化开发的探索！

　　首先来验证上一篇文章   基于webpack的前端工程化开发解决方案探索（一）：动态生成HTML  中的遗留问题：webpack将如何处理按需加载的资源，还能继续通过AJAX进行异步加载吗？

　　1. require.ensure

　　在上一章我们已经知道通过require引入的资源，可以通过插件让webpack将其独立成为单独的文件，然后向HTML中自动写入路径。那对于require.ensure情况又会是怎样的情况呢？

　　我们都知道webpack通过require.ensure来对我们的代码进行分割，将按需加载的代码单独放在的块文件chunk中，然后在合适的时候异步加载进入文档中。

　　在webpack中引入的提取文件插件，是否影响这一功能呢？

　　 同样的，这次我们对上次的项目进行了改动，具体代码可以查看：　https://github.com/xiaoyunchen/webpack

　　 首先，我们在JS下新增了一个components文件夹，用于存放自定义的组件，然后定义了一个dialog组件（dialog的实现请参考之前的文章，本章将对本部分进行简化处理）。

　　在dialog组件中我们定义了dialog所需的HTML模板，CSS样式文件，以及入口文件Index.js（如果模块逻辑层次很复杂的话，这里还可以再新建两个关于模板和样式的子目录）

　　我们稍微看下index.js的内容：

 1 (function(){ 2   //加载模块CSS 3   require('./dialog.css'); 4   //加载模板 5   var html=require('./dialog.html'); 6    7   module.exports=function(text){ 8     $('body').append(html); 9     $('.dialog:last-child').html(text);10   };11   12 })();

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：基于webpack的前端工程化开发解决方案探索（二）：代码分割与图片加载

关键词：前端