webpack打包原理入门探究（七）模板处理

公众号---人生代码

发布于 2020-06-11 10:39:12

3120

发布于 2020-06-11 10:39:12

文章被收录于专栏：人生代码人生代码

webpack打包原理入门探究（六）less|sass-loader初探

webpack打包原理入门探究（五）css-loader初探

webpack打包原理入门探究（五）loader初探（二）

webpack打包原理入门探究（五）loader初探（一）

webpack打包原理入门探究（四）插件探究（下）

webpack打包原理入门探究（四）插件探究（上）

webpack打包原理入门探究（三）入口探究

webpack打包原理入门探究（二）基本配置

webpack打包原理入门探究（一）

起初为什么会想要学习 webpack 打包原理，只是因为好奇心发作，由于在工作中，我有处理过项目的首屏加载速度优化的过程，虽然但是是解决了加载问题，也对那些 loader 甚是一脸懵逼，于是上周五下定决心要研究一下 webpack 原理，研究了 vue 几个常见的组件，创建了一个 kui 组件库

这节课，我们来学习 webpack 如何处理模板

首先，在 src/components 新建以下几个文件

layer.html

<div class="layer">
        this a layer
</div>

layer.scss

.layer {
    height: 100px;
    width: 100px;
    background: red;
    color: #ffffff;
    display: flex;
}

layer.js

import tpl from './layer.html'
import './layer.scss'
function layer() {
    return {
        name: 'layer',
        tpl: tpl
    }
}

export default  layer

然后在 app.js 导入

import './styles/css/common.css'
import './styles/less/common.less'
import Layer from './components/layer/layer.js'

const App = () => {
    var dom = document.getElementById('app')
    dom.innerHTML = (new Layer()).tpl
}

new App()