开始学习webpack的各种loader，并分享loader的作用和简要原理，促进大家一起进步。

css-loader

作用

负责提取css文件内容，并转成js模块导出

使用导出的对象调用toString()方法可以生成css字符串，如果开启了sourcemap，css字符串将会附加上sourcemap内容

为了方便理解，以下为精简后的代码

((module, __webpack_exports__, __webpack_require__) => {

 // 生成css字符串，若需要sourcemap，则生成的字符串附带sourcemap
  var cssWithMappingToString = __webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js");

  var cssLoaderRuntimeApi = __webpack_require__( "./node_modules/css-loader/dist/runtime/api.js");

  const cssLoaderExports: {
    toString: () => string,
    // 通过此方法可以加载使用@import导入的其他css文件
    i: (modules, media, dedupe, supports, layer) => void,
    [key:number]: [
        string, // moduleId
        string, // css
        string, // media
        {
            version:number,
            sources:string[],
            names:string[],
            mappings:string,
            sourcesContent:string[],
            sourceRoot:string
        }, // sourceMap
        string, // supports
        string // layer
     ]
  } = cssLoaderRuntimeApi(cssWithMappingToString)

  cssLoaderExports.push([module.id, ".main {\n  width: 200px;\n}", "",{"version":3,"sources":["webpack://./src/styles/normal.css"],"names":[],"mappings":"AAAA;EACE,YAAY;AACd","sourcesContent":[".main {\n  width: 200px;\n}"],"sourceRoot":""}]);
  module.exports = cssLoaderExports
})

导出的对象是一个数组，同时有其他额外的自定义的方法，数组里面存储了import的css文件内容(例如使用@import url(...);)，和入口css文件内容。

配合css-in-js的库astroturf

webpack上面配置了astroturf/loader后，会利用css-loader做css类名的scope化,把样式类名跟唯一id的对应关系存在locals变量中

cssLoaderExports.push([module.id,
    ".C8oDp8ezpVLz3DQ_W9Jc {\n  padding: .5rem 1rem;\n  }\n
    .UZWRLSQL8B9yOvYkQmop {\n    color: white;\n }", "",
    {"version":3,
    "sources":["webpack://./src/theme-styles.module.css"],"names":[],
    "mappings":"AAAA;IACI,gBAAgB;",
    "sourcesContent":[".btn {\n padding: .5rem 1rem;\n  }\n\n  
    .primary {\n color: white;\n  }"],
    "sourceRoot":""}
  ]);

cssLoaderExports.locals = {
	"btn": "C8oDp8ezpVLz3DQ_W9Jc",
	"primary": "UZWRLSQL8B9yOvYkQmop"
};