前端工程化之: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 有能力避免同一个样式的重复导入。

你可能感兴趣的:(前端,webpack,css)