webpack如何解析less?(less-loader、css-loader、style-loade)

主要通过less-loader、css-loader、style-loader插件作用

less-loader：用于加载.less文件，将less转化为css

css-loader：用于加载.css文件，将css转化为commonjs

style-loader: 将样式通过<style>标签插入到head中

先安装这几款插件

npm i style-loader css-loader less less-loader -D

在webpack.config.js文件中加入如下配置

'use strict'

const path = require('path')

module.exports = {
  mode: 'production',
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

解析less主要是通过以上代码中的以下部分

      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }

这里有一点要注意，他们的解析过程是链式的，所以在use数组中下面的部分会先执行，所以他们的执行顺序其实是less-loader > css-loader > style-loader