23. 抽离css文件

目前,css代码被css-loader转换后,交给style-loader进行处理

style-loader使用的方式是一段js代码,将样式加入到style元素中

而实际开发中,我们往往希望依赖的最终样式形成一个css文件

此时需要一个库: mini-css-extract-plugin

该库提供了一个plugin和一个loader

• plugin: 主要负责生成css文件
• loader: 负责记录要生成的css的文件内容,同时导出开启css-module后的对象

使用方式

const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
  module:{
    rules:[
      {test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader?modules"]}
    ]
  },
  plugin:[new MiniCssExtractPlugin()]
}

配置生成的文件名

同output.filename的含义一样,即根据chunk生成样式的文件名

配置生成文件名,例如```[name].[content:5].css

默认情况下,每个chunk对应一个css

const HtmlWebpackPlugin = require("html-webpack-plugin")
var { CleanWebpackPlugin } = require("clean-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { chunk } = require("lodash")
module.exports = {
    mode: "development",
    entry: {
        main: "./src/index.js",
        other: "./src/other.js"
    },
    output: {
        filename: "js/[name].[chunkhash:5].js",
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader?modules"]
            },
            {
                test: /\.jpeg$/, use: {
                    loader: "file-loader",
                    options: {
                        name: "img/[hash:5].[ext]"
                    }
                }
            }
        ]
    },
    devServer: {
        open: true
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            chunks: ['main']
        }),
        new HtmlWebpackPlugin({
            template: "./public/other.html",
            chunks: ['other'],
            filename: 'other.html'
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].[contenthash:5].css"
        })
    ]
}