提取 CSS 成单独文件

提取css 成单独文件需要用到mini-css-extract-plugin插件

一、提取 css 的核心配置

// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
…………
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // webpack配置

    ………

    // loader的配置
    module: {
        rules: [
            //打包 css 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //这个loader取代style-loader。作用:提取js中的css成单独文件
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                          // 这里可以指定一个 publicPath
                          // 默认使用 webpackOptions.output中的publicPath
                          publicPath: '../'
                        },
                      },
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },

                ……
        ]
    },
    // plugins的配置
    plugins: [

        ……

        new MiniCssExtractPlugin({
            //对输出的css文件进行重命名
            filename: './css/[name].css',
            chunkFilename: "./css/[id].css",
            ignoreOrder: false,
            linkType: "text/css",
        })
    ],
        ……
}

1.1、和原有配置差异

引入mini-css-extract-plugin插件

// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

修改 loader 配置

    // 原配置
    // loader的配置
    module: {
        rules: [
            //打包 css 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },
        ]
    },


//=============================        

    // 变更为
    // loader的配置
    module: {
        rules: [
            //打包 css 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //这个loader取代style-loader。作用:提取js中的css成单独文件
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                          // 这里可以指定一个 publicPath
                          // 默认使用 webpackOptions.output中的publicPath,
                          // 这里如果注释掉是因为未给css文件单独分配文件夹,无需进行路径调整
                           publicPath: '../'
                        },
                      },
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },

                ……
        ]
    },

使用 MiniCssExtractPlugin.loader 取代style-loader，作用是提取js中的css成单独文件。

添加plugins的配置

    // 添加插件配置
    // plugins的配置
    plugins: [

        ……

        new MiniCssExtractPlugin({
            //对输出的css文件进行重命名，这里单独为生产的 css 创建一个 css 文件夹。
            filename: './css/[name].css',
            chunkFilename: "./css/[id].css",
            ignoreOrder: false,
            linkType: "text/css",
        })
    ],

添加插件配置 可指定 文件名、和标签引入类型。

二、安装插件

# 安装 mini-css-extract-plugin 插件
> npm i mini-css-extract-plugin -D

三、运行

> webpack

结论

1、独立提取 css文件使用mini-css-extract-plugin插件。

2、publicPath: '../‘只在单独为 css文件分配文件夹时使用。

3、记得要在plugins: []配置mini-css-extract-plugin插件。