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

本文主要是介绍前端工程化之：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 干了什么：

将 css 文件的内容作为字符串导出。
将 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 = {}