简易的 less、css、style loader

    1. // local-less-loader
    2. const less = require("less");
    3. module.exports = function (source) {
    4.   less.render(source, (e, output) => {
    5.     this.callback(e, output.css);
    6.   });
    7. };
    9. // local-css-loader
    10. module.exports = function (source) {
    11.   // 有一些符号需要转一下
    12.   return JSON.stringify(source);
    13. };
    16. // local-style-loader
    17. module.exports = function (source) {
    18.   const res = `
    19.     const e = document.createElement('style');
    20.     e.innerHTML = ${source};
    21.     document.head.appendChild(e)
    22.   `;
    23.   return res;
    24. };

    使用，

    1. module.exports = {
    2.   module: {
    3.     rules: [
    4.       {
    5.         test: /\.css$/,
    6.         use: ["local-style-loader", "local-css-loader"],
    7.       },
    8.       {
    9.         test: /\.less$/,
    10.         use: [
    11.           "local-style-loader",
    12.           "local-css-loader",
    13.           "local-postcss-loader",
    14.           "local-less-loader",
    15.         ],
    16.       },
    17.     ],
    18.   },
    19.   resolveLoader: {
    20.     modules: ["./node_modules", "./customedLoaders"],
    21.   },
    22. };