webpack打包原理入门探究(六)less|sass-loader初探
webpack打包原理入门探究(五)css-loader初探
起初为什么会想要学习 webpack 打包原理,只是因为好奇心发作,由于在工作中,我有处理过项目的首屏加载速度优化的过程,虽然但是是解决了加载问题,也对那些 loader 甚是一脸懵逼,于是上周五下定决心要研究一下 webpack 原理,研究了 vue 几个常见的 组件,创建了一个 kui 组件库
首先,在 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
来看看浏览器有何变化
嗯,这节课就到此为止吧