第三步：解析less，css

配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');


module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        path: __dirname + '/release',
        filename: './bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?{"modules":true}'
            },

        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'template/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: 'source-map',
    devServer: {
        contentBase: path.join(__dirname, 'release'),
        port: 9000,
        hotOnly: true
    }
};

注意点

• 解析 less 文件的配置，loader的顺序有 严格要求。loader 的加载顺序是 倒序，也就是 webpack 会先加载 less-loader ，再加载 css-loader ，最后加载 style-loader ，

  • less-loader : 把less代码解析成css代码
  • css-loader : 是解析 css 代码中的 @import 和 url()
  • style-loader : 通过 style 标签将 css 文件插入到 html 文件中

  综上，style-loader 一定是最后一个被加载，所以写在第一位；css-loader 解析 css 是第二步，less-loader 是 less -> css ，第一个加载，所以放在最后一个

• 解析 css ，并且支持css module语法

  • 使用方式如下:
    css module用法
  • css 代码如下
    css代码
  • loader配置：

  {
      test: /\.css$/,
      loader: 'style-loader!css-loader?{"modules":true}'
  },
  

• 说一下loader 在webpack.config.js中 配置的几种书写方式（参考webpack中文网）

  • 对象形式：

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
    

  • 内联形式1：

    module: {
        rules: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?{"modules":true}'
            },
        ]
    }
    

  • 内联形式2：

    module: {
            rules: [
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader?modules'
                },
            ]
        }
    

  关于这三种写法，网上也没找到相关介绍，据我猜测，两种内联写法最后都被解析成对象，而最后一种写法完全遵循url的参数格式（只是目测😅），想要灵活运用各种loader，还是要把这个文档多看看