手写的是个 less loader，方法 get 自本篇文章

less loader

create-react-app 默认配置没有 less ，只有 sass，加一个

create-react-app · 创建工程

npx create-react-app webpack-test

eject · 开放项目配置

此方法 get 自本篇文章

yarn eject

安装 less-loader 依赖

npm i less-loader --save-dev

修改 Webpack 配置使之支持 `less`

文件路径： config/webpack.config.js

找到文件内部本来就有的 sass 和 sassModule 的相关配置，依样画葫芦，改成 less 和 lessModule 的即可。

添加的代码如下：

其实可以不看下面的代码，文件里搜 sass 关键字，一样画葫芦，更方便

const lessRegex = /.(less)$/;
const lessModuleRegex = /.module.(less)$/;

return {
  ...
  module: {
    ...
    rules: [
      ...
      {
          test: lessRegex,
          exclude: lessModuleRegex,
          use: getStyleLoaders(
              {
                importLoaders: 3,
                sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                modules: {
                  mode: 'icss',
                },
              },
              'less-loader'
          ),
          sideEffects: true,
        },
        {
          test: lessModuleRegex,
          use: getStyleLoaders(
              {
                importLoaders: 3,
                sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                modules: {
                  mode: 'local',
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              },
              'less-loader'
          ),
        },
      
    ]
  }
};

至此 less 环境配置完毕。

编写自定义的 less-loader & style-loader

方法参考自文章：juejin.cn/post/688893… 根目录创建文件夹 loader, 里面创建 less-loader.js & style-loader

// less-loader.js

const less = require('less');
function loader(source) {
 const callback = this.async();
 less.render(source, function (err, res) {
  let { css } = res;
  callback(null, css);
 });
}
module.exports = loader;

// style-loader.js
function loader(source, map) {
 let style = `
    let style = document.createElement('style');
    style.innerHTML = ${JSON.stringify(source)};
    document.head.appendChild(style)
  `;
 return style;
}
module.exports = loader;

webpack.config.js 配置 loader

之前在 webpack.config.js 配置好的 style-loader & less-loader 改成我们自己写的 loader 改动的内容代码如下：

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: [
    {
      loader: './loader/style-loader.js',
    },
    {
      loader: path.resolve(__dirname, '../loader', 'less-loader'),
    },
  ],
}

主要是注意路径，因为 eject 后， webpack.config.js 是在 config 文件夹下的，没有在根目录。

测试

在 App.js 中引入一个新创建的 test.less 文件，添加自定义样式。

根目录运行：yarn start

结束

其实这里是手写了简易版的 less-loader & style-loader.
想和原版对比的可以戳 less-loader 和 style-loader

手写 Plugins

这篇文章讲得很清晰：juejin.cn/post/688893…

create-react-app 手写 Webpack loader & plugin