前端工程化之：webpack3-2(利用webpack拆分css)

一、利用 webpack 拆分 css 

要拆分 css ，就必须把 css 当成像 js 那样的模块；要把 css 当成模块，就必须有一个构建工具（ webpack ），它具备合并代码的能力。

而 webpack 本身只能读取 css 文件的内容、将其当作 JS 代码进行分析，因此，会导致错误。

于是，就必须有一个 loader ，能够将 css 代码转换为 js 代码。

 1. css-loader 

 css-loader 的作用，就是将 css 代码转换为 js 代码。

它的处理原理极其简单：将 css 代码作为字符串导出。

 例1：

.red{
    color:"#f40";
}

 经过 css-loader 转换后变成 js 代码：

module.exports = `.red{
    color:"#f40";
}`

上面的 js 代码是经过简化后的，不代表真实的 css-loader 的转换后代码， css-loader 转换后的代码会有些复杂，同时会导出更多的信息，但核心思想不变

例2：

.red{
    color:"#f40";
    background:url("./bg.png")
}

经过 css-loader 转换后变成 js 代码：

var import1 = require("./bg.png");
module.exports = `.red{
    color:"#f40";
    background:url("${import1}")
}`;

这样一来，经过 webpack 的后续处理，会把依赖 ./bg.png 添加到模块列表，然后再将代码转换为：

var import1 = __webpack_require__("./src/bg.png");
module.exports = `.red{
    color:"#f40";
    background:url("${import1}")
}`;

 例3：

@import "./reset.css";
.red{
    color:"#f40";
    background:url("./bg.png")
}

会转换为：

var import1 = require("./reset.css");
var import2 = require("./bg.png");
module.exports = `${import1}
.red{
    color:"#f40";
    background:url("${import2}")
}`;

总结， css-loader 干了什么：

1. 将 css 文件的内容作为字符串导出。
2.  将 css 中的其他依赖作为 require 导入，以便 webpack 分析依赖。

 banner.css ：

.red {
    color: "#f40";
    background: url("./bg.png");
    width: 1000px;
    height: 1000px;
    border: 2px solid;
}

  index.html ：

const result = require("./assets/banner.css")
const css = result.toString();
var style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
console.log(css);

 webpack.config.js ：

module.exports = {
    mode: "development",
    devtool: "source-map",
    watch: true,
    module: {
        rules: [
            { test: /\.css$/, use: ["css-loader"] },
            {
                test: /\.png$/, use: "file-loader"
            }
        ]
    }
}

 2.style-loader

由于 css-loader 仅提供了将 css 转换为字符串导出的能力，剩余的事情要交给其他 loader 或plugin 来处理。

 style-loader 可以将 css-loader 转换后的代码进一步处理，将 css-loader 导出的字符串加入到页面的 style 元素中。

例如：

.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 = {}

以上代码均为简化后的代码，并不代表真实的代码，
 style-loader 有能力避免同一个样式的重复导入。