webpack打包原理入门探究（七）模板处理
webpack打包原理入门探究（六）less|sass-loader初探
webpack打包原理入门探究（五）css-loader初探
起初为什么会想要学习 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()然后，我们运行一下 npm run webpack.app
来看看浏览器有何变化
嗯，这节课就到此为止吧
举报
腾讯云开发者
