对于款式编译
因为webpack编译的思维是万无皆可JS，意旨所有web我的项目关联的资源文件，都能够通过js关联起来。然而又因为图片，款式这些原本和js八竿子打不到一起的，所以就有了各种loader来解决他们的关联性问题；
说到webpack的款式编译，总有几个loader是不能错过的，比方less-loader, css-loader，style-loader,轻易上一段罕用配置：
const lessLoader = { test: /\.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, }, }, 'less-loader', ],}以上文件就是通知webpack，在遇到文件名以.less结尾的文件，先用less-loader编译，再用css-loader编译，最初用style-loader，已经我是用这样一段js伪代码来概述的：
// 伪代码const res = styleLoader(cssLoader(lessLoader('xxx.less')))；其实这个伪代码，一点都不谨严.
都是loader，但作用却天壤之别
style-loader 其实与 css-loader, less-loader的作用是有区别的，后者其实承当的是模块化与语法转译这一块；而style-loader这一类（还有罕用的mini-css-extract-plugin）承当的是粘结剂性能，就是将js中的css加载到html中，从而使款式失效;
随便谨严一点的伪代码应该这样写:
const cssContent = cssLoader(lessLoader('xxx.less'))；// 通过styleTag插入css 字符串到head中styleLoader(cssContent, document.head)；如同文章写到这里就应该完结了，但实际上好戏才开始。
已经我认为，style-loader是在构建时，就将款式插入到了html中，但实际上我错了，而且这一错就是五年(已经你认为的，不过是你的无知：送给本人),正确的答案是css被构建到了js文件中，而后在js文件加载时，通过style-loader提供的办法将其加载到html中。
简略来讲，已经我认为这个loader是个构建时，但他其实是一个运行时。
怎么判断呢，很简略，就像如何判断一个网站是否是服务端渲染一样，看网站首页申请获取的html文件是否含款式(也能够间接通过source面板查看html文件, 不是elements)。
之所以会产生这个误判，是我间接平移了mini-css-extract-plugin的构建思维，这个plugin就剥离了JS中的款式，造成了一个新的文件，而后再把款式地址插入到html头中，这是个完完全全的构建时。
而最近为什么会忽然关注到这个点，是因为咱们在调一个微组件的计划，在组件胜利加载时，发现款式失落,看看下图的惨不忍睹：
通过debug，发现款式的确被打包进了文件，只是没有被加载到style标签中，第一直觉就是短少loader，而后查看构建工具，发现款式编译配置只到了css-loader这一级，短少style-loader。
从构建后果看款式加载过程
如果到这文章就完结了，仿佛就太不像我了，毕竟刨根问底（xuxudaodao）的我才是真的我.接下来，通过一段实例代码，来看webpack构建，是怎么实现款式加载的。
示例代码：
// style.less代码@font-size: 28px;.Demo { box-sizing: border-box; :global { .demo-title { font-size: @font-size; } }}import React from 'react';// 引入款式import style from './style.less';export default function Demo() { return ( <div className={style.Demo}> <h3 className="emo-title">this is a demo</h3> </div> );}而后通过webpack，采纳style-loader的形式构建，为了不便浏览，没有做代码压缩和美化。
而后从入口能够看见款式引入是这样的：
// 正文无用代码有删减__webpack_require__.d(__webpack_exports__, "default", function() { return Demo; });var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);// 引入款式var _style_less__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./src/demo/style.less");var _style_less__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_style_less__WEBPACK_IMPORTED_MODULE_1__);function Demo() { return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { className: _style_less__WEBPACK_IMPORTED_MODULE_1___default.a.Demo }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h3", { className: "emo-title" }, "this is a demo"));}能够看见，在入口文件，有一个从./src/demo/style.less模块的款式引入，并赋值给了_style_less__WEBPACK_IMPORTED_MODULE_1___default变量;
而后顺藤摸瓜，持续看一下style.less模块长什么样：
// "./src/demo/style.less" 模块function(module, exports, __webpack_require__) { var api = __webpack_require__("../../../../.def/def_modules/.builders/@ali/builder-cook/node_modules/_style-loader@1.3.0@style-loader/dist/runtime/injectStylesIntoStyleTag.js"); var content = __webpack_require__("../../../../.def/def_modules/.builders/@ali/builder-cook/node_modules/_css-loader@1.0.1@css-loader/index.js?!../../../../.def/def_modules/.builders/@ali/builder-cook/node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js?!../../../../.def/def_modules/.builders/@ali/builder-cook/node_modules/_less-loader@6.2.0@less-loader/dist/cjs.js?!./src/demo/style.less"); content = content.__esModule ? content.default : content; if (typeof content === 'string') { content = [[module.i, content, '']]; } var options = {}; options.insert = "head"; options.singleton = false; var update = api(content, options); module.exports = content.locals || {};}这这一块的代码就能够看出，这一个模块是一个承上（css引入）启下（插入html）；
承上通过从less-loader/dist/cjs.js?!./src/demo/style.less这个模块引入, 而插入html则是通过从injectStylesIntoStyleTag导入了一个办法，从办法名就能够晓得他的作用就是通过style标签插入css款式.
这外面还有一个点，就是最初的导出，模块最初将content.locals导出，持续依据线索去看看content到底是什么：
function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__("../../../../.def/def_modules/.builders/@ali/builder-cook/node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false); exports.push([module.i, "._1rfoVjSya7b-iuQB2_qKPh {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n._1rfoVjSya7b-iuQB2_qKPh .demo-title {\n font-size: 28px;\n}\n", ""]); exports.locals = { "Demo": "_1rfoVjSya7b-iuQB2_qKPh" };}通过下面的代码，就能够看出exports.locals的作用就是css的模块化
至此，水落石出....
写在最初
我仿佛特地享受这种顺藤摸瓜的前端(ruozhi)侦探感觉, 这让以前对我来说的一个黑盒被关上了，最初还是那句话，前端外面真的没什么黑魔化，根本就是红宝书外面的常识，只有能静下心来细品: 魔法究竟只是一个特地好的想法而已。