三、处理样式文件（css/less/scss/stylus）--

1、loader的特点

（1）loader的特点：
- (1)希望功能单一
- style-loader 将创建style标签，将css-loader解析出的样式append到style标签中，并append到head中去
- css-loader处理导入的资源 import 图片等 

（2）loader的用法：
- (1) loader后使用字符串 表示只用一个loader
- (2) 多个loader使用数组
- (3) loader的顺序：默认是从右到左 从下到上
- (4) loader还可以写成对象的形式

2、处理CSS文件

（1）使用的loader：
- css-loader style-loader
- css-loader 解析 @import 这种语法
- style-loader 将处理好的CSS插入到HTML的head标签中

（2）安装：
yarn add css-loader style-loader -D

（3）配置：
module: {
    rules: [{
        test: /\.css$/,
            use: [{
                    loader: 'style-loader',
                    options: {
                        insert: 'head' // 以前是insertAt属性
                    }
                },
                'css-loader'
            ]
        }]
}

3、处理 less/sass/stylus文件

（1）less文件对应的loader：
- yarn add less less-loader -D

（2）sass文件对应的loader
- yarn add node-sass sass-loader -D

（3）stylus对应的loader
- yarn add stylus stylus-loader -D

（4）配置文件增加对应的规则：
{
    test: /\.less$/,
    use: [{
            loader: 'style-loader',
            options: {
                insert: 'head' // 以前是insertAt属性
            }
        },
        'css-loader', // 解析 @import 语法和解析路径
        'less-loader' // 把less语法转换成css语法
    ]
}

4、此时对应的配置文件

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

module.exports = {
    mode: 'development',
    devtool: 'eval',
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    }, // 入口文件
    output: {
        path: path.join(__dirname, 'dist'), // 输出目录，只能是绝对目录
        filename: '[name].[hash].js' // 输出文件名
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 8080,
        host: 'localhost',
        compress: true,
        // open: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', // 使用的HTML模板
            filename: 'index.html', // 打包生成到的HTML文件名
            minify: {
                removeAttributeQuotes: true, // 打包后去掉双引号
                collapseInlineTagWhitespace: true, // 打包后去空格
            },
            hash: true, // 会给每个引入的chunks在文件类型后添加一个hash值 
            chunks: ['login', 'index'], // 规定HTML中引入的chunks
            chunksSortMode: 'manual', // 规定引入chunks的排序方式
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                        loader: 'style-loader',
                        options: {
                            insert: 'head' // 以前是insertAt属性
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [{
                        loader: 'style-loader',
                        options: {
                            insert: 'head' // 以前是insertAt属性
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
}