layer.less

.layer {
  width: 600px;
  height: 200px;
  background-color: green;

  div {
    width: 400px;
    height: 100px;
    background-color: red;
  }

  .flex {
    display: flex;
  }
}

layer.html

<div class="layer">
    <div>

    </div>
</div>

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              // 排除
              exclude: /node_modules/,
              query: {
                  presets: ["@babel/preset-env"]
              }
          },
          {
              test: /\.css$/,
              use: [
                  'style-loader',
                  // 用来处理css中引入的css
                  { loader: 'css-loader', options: { importLoaders: 1 } },
                  {
                      loader: 'postcss-loader',
                      options: {
                          ident: 'postcss',
                          plugins: [
                              require('autoprefixer')({
                                  broswers: ['last 5 versions']
                              }),
                          ]
                      }
                  }
              ]
          },
          {
              test: /\.less$/,
              use: [
                  'style-loader',
                  // 用来处理css中引入的css
                  'css-loader',
                  {
                      loader: 'postcss-loader',
                      options: {
                          ident: 'postcss',
                          plugins: [
                              require('autoprefixer')({
                                  broswers: ['last 5 versions']
                              }),
                          ]
                      }
                  },
                  { loader: 'less-loader'}
              ]
          }
      ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            // html 标题
            title: 'this is a.html',
            // 使用模板
            template: 'index.html',
            // script标签插入位置
            inject: 'body'
        }),
    ],
};

loaders的顺序是从右到左

css 需要importLoader less中已经默认处理过了.

关于sass以及less不用添加importLoaders参数个人理解是less-loader将其处理编译成了一个单文件css(包括import部分的less),而直接导入css的并没被处理成单文件css。

处理less文件，要安装less-loader:（将less转化为css）

npm install less-loader --save-dev

(loader的处理方式是从右到左，为loader属性设置一串的loader值后，会首先处理最右边的loader)

使用配置如下：

以上配置打包后，就可将less文件转化成css并通过style标签引入到打包后的index.html头部了，且less中兼容性不好的属性也会经过postcss的处理自动添加上前缀

如果在less文件中使用了@import引入了其他less文件，当通过上述设置直接打包后，被引入模块同样也会经过postcss的处理，这跟处理css文件是有区别的

如果使用了sass文件，同样也是先安装再使用

npm i sass-loader --save-dev

loader:'style-loader!css-loader?importLoaders=1!postcss-loader'

在less文件中@import  不许要制定importantLoaders=1 （处理flex浏览器兼容问题的时候）

安装less-loader之前要安装less，处理less就要安装less-loader，sass-loader

有关于postcssloader引入的一些顺序

style!css?importLoader=1!postcss

style!css!postcss!sass!less