webpack5的loader配置小白学习篇

// webpack.config.js
...
module: {
    rules: [
        {
            test: /\.css$/, // 用于匹配文件,可以是字符串或者正则
            loader: 'css-loader', // 当只有一个的时候就用这个
            use: ['style-loader','css-loader',] // 当有多个的时候就用这个，执行顺序是从右向左
        },
        {
            test: /\.scss$/, // 用于匹配文件,可以是字符串或者正则
            loader: 'css-loader', // 当只有一个的时候就用这个
            use: [MiniCssExtractPlugin.loader, 'style-loader','css-loader', 'sass-loader'] // 执行顺序是从右向左
        },
        {
            test: /\.styl$/, // 用于匹配文件,可以是字符串或者正则
            loader: 'stylus-loader', // 当只有一个的时候就用这个
            use: [{
                loader: 'postcss-loader', // 如果loader带有参数，则使用此方式
                option: {
                    name: 'stylus'
                },
            },'css-loader', 'stylus-loader'] // 执行顺序是从右向左
        }
    ]
}
...

// webpack.config.js
...
module: {},
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].min.css', // css名称
        chunkFileName: '[name].chunk_[id].css' // 异步引入的css名称
    })
]
...