webpac总结

319 阅读1分钟

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"
}

4. js兼容性

5. 性能优化

6. 补充和案例

6.1 不确定的动态依赖

6.2 搭建多页应用

6.2 webpack搭建React + TS工程

6.3 webpack搭建Vue工程

6.4 webpack搭建服务端渲染工程