在给style-loader设置优先加载时（参考教程）：

        use: [{
          loader: "style-loader",
          options: {
            insertAt: "top",//将当前loader添加到<head>标签内容的最上面
          }
        }, "css-loader"]

运行：npm run dev

发现报错了：

ERROR in ./src/index.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'insertAt'. These properties are valid:
   object { injectType?, attributes?, insert?, base?, esModule?, modules? }
    at validate (/Users/maolijun298/Documents/demo/h5/mm_webpack/node_modules/style-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/Users/maolijun298/Documents/demo/h5/mm_webpack/node_modules/style-loader/dist/index.js:25:28)
 @ ./src/aaa.js 4:0-22

webpack 5.21.2 compiled with 1 error in 634 ms
ℹ ｢wdm｣: Failed to compile.

原因是：

  • 在webpack4.0中insertAt已经被废弃，现在的api是insert, 这是一个函数。

特别鸣谢：sunshine_uniq

正确的配置如下：

        use: [{
          loader: "style-loader",
          options: {
            //将当前loader添加到<head>标签内容的最上面
            insert: function (element) {
              var parent = document.querySelector('head');
              var lastInsertedElement = window._lastElementInsertedByStyleLoader;
              if (!lastInsertedElement) {
                parent.insertBefore(element, parent.firstChild);
              } else if (lastInsertedElement.nextSibling) {
                parent.insertBefore(element, lastInsertedElement.nextSibling)
              } else {
                parent.appendChild(element)
              }
            }
          }
        }, "css-loader"]