webpack-02：（拓展）如何实现less-loader、css-loader、style-loader

1、webpack.config 配置

      {
        test: /\.less$/,
        use: [
          'my-style-loader',
          'my-css-loader',
          // {
          //   loader: 'postcss-loader',
          // },
          {
            loader: 'my-less-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },

2、实现 my-less-loader

const less = require('less')

module.exports = function (source) {
  less.render(source, (err, output) => {
    console.log('less-loader output:', output)
    this.callback(err, output.css)
    // output.css 包含转义成css代码
  })
}

3、实现 my-css-loader

// css-loader 序列化

module.exports = function (source) {
  const data = JSON.stringify(source)
  console.log('css-loader 序列化：')
  console.log(data)
  return data
}

4、实现 my-style-loader

module.exports = function (source) {
  return `
   const tag = document.createElement('style');
   tag.innerHTML = ${source};
   document.head.appendChild(tag)
  `
}