轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack提取 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插件。