同一个项目中，由于 CSS/LESS/SCSS 文件之间具有依赖关系，所以强烈推荐采用同一种技术实现。对于单个组件，不大可能像 Vue 一样写个 Webpack Loader 支持 .vue 类型的组件格式。样式文件的加载需要在对应的 .js 文件中显式引入 .less 文件，比如：

 项目模板默认采用 Mustache，在 Webpack 的支持下，模板内容被单独放在一个文件中，并以 .mst 作为自定义后缀，文件内容依然是 HTML 格式，只是根标签为 <template>。Webpack 中选用 html-loader 对其进行解析，规则如下：

对于 Mustache 模板的自动解析和加载，网上有开源的 mustache-loader 实现，但其关注度实在太低，而 html-loader 足以达到所需功能：

对于其他模板语言同样可以使用这种方法，就可以在项目中灵活的使用不同的模板库了。不过需要注意的是，同一个项目中最好只使用一种模板语言，方便管理，同时不会增加打包文件大小。
将 .mst 模板加载到页面中和 .less 方法差不多。在对应的 .js 文件中显式引入，然后用 extractTemplate 方法提取出模板内容即可：

这种显式引入的方式有一个好处是，可以手动控制不同的模板和样式。在实际产品需求中，内容和样式改变是很频繁的，而功能逻辑的变化相对要慢一些，这样通过 js 引用不同版本的模板和样式就会比较灵活。如果能把这一套管理机制抽象出来单独进行配置也是很不错的。

页面文件在 Webpack 中也是以模板的角色存在的，解析方式和模板一样，规则见上文。由于是页面入口文件，在 Webpack 中还需要使用 HtmlWebpackPlugin 插件进行配置。如下配置中，项目存在两个不同的页面入口，所以需要两个 HtmlWebpackPlugin 实例：

      由于用户每次进入 Web 页面都会加载首页，所以首页越小越节省流量。参考 Vue 项目的 index.html 就会发现里面基本只有一个骨架，具体内容都在组件中。但项目配置本身不会对这点进行假设，所以即使在首页中写入所有内容也是可行的。