webpack学习(九)-css打包为单独文件

鱼鱼大仙的猫 9/15/2020 webpack

对于前面的css打包，我们可以发现，彼此不同的css文件打包后生成在同一个文件中，在进行文件查看和引用的时候，十分不友好，因此，在打包过程中，我们需要将css文件分开打包并且统一打包到一个文件夹中。

# webpack.config.js

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    ...
    ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    // 这个loader取代style-loader
                    // 作用：提取js中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            // 对输出的css文件进行重命名
            filename: 'css/build.css'
        })
    ],
    ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

代码中使用 MiniCssExtractPlugin 插件来替换 style-loader 对css文件进行打包，它的作用是将js中的css文件提取成单独的文件，之后在 plugin 中，我们对输出的css文件进行重命名，使其统一打包到css文件夹中。