1. Webpack核心功能
2. 常用扩展
3. CSS工程化
3.1 概述
3.2 利用webpack拆分css
css-loader
例如:
@import "./reset.css";
.red{
color:"#f40";
background:url("./bg.png")
}
经过css-loader转换后的代码:
var import1 = require("./reset.css");
var import2 = require("./bg.png");
module.exports = `${import1}
.red{
color:"#f40";
background:url("${import2}")
}`;
style-loader
例如:
.red{
color:"#f40";
}
经过css-loader转换后变成js代码:
module.exports = `.red{
color:"#f40";
}`
经过style-loader转换后变成:
module.exports = `.red{
color:"#f40";
}`
var style = module.exports;
var styleElem = document.createElement("style");
styleElem.innerHTML = style;
document.head.appendChild(styleElem);
module.exports = {}
3.3 BEM
3.4 css-in-js
例:
const styles = {
backgroundColor: "#f40",
color: "#fff",
width: "400px",
height: "500px",
margin: "0 auto"
}