webpack5 css文件提取

luxiaoyuan2011

已于 2022-08-16 16:47:05 修改

阅读量488

点赞数 1

分类专栏： webpack

于 2022-08-16 16:29:17 首次发布

本文链接：https://blog.csdn.net/luxiaoyuan2011/article/details/126368521

版权

Webpack mini-css-extract-plugin CSS打包 JavaScript 模块配置

关键词由CSDN通过智能技术生成

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 首先安装mini-css-extract-plugin 插件：

npm i mini-css-extract-plugin

2 引入mini-css-extract-plugin

// 如果要加载多文件css，不能使用　`extract-text-webpack-plugin` 而是用 mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

3 配置module

       [
        // 其他配置
        ...
        {
            test: /\.css$/,
            use: [
                // 'style-loader', 
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }, {
            test: /\.less$/,
            use: [
                // 'style-loader',
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader'
            ]
        }
        ...
        // 其他配置
        ]

4 配置plugins

plugins: [
        ...
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]

5 完整的配置代码如下：

const { resolve } = require('path')
// webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 如果要加载多文件css，不能使用　`extract-text-webpack-plugin` 而是用 mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/bundle.js',
        path: resolve(__dirname, 'dist'),
        clean: true
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                // 'style-loader', 
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }, {
            test: /\.less$/,
            use: [
                // 'style-loader',
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader'
            ]
        }, {
            test: /\.(png|jpe?g|gig|svg|webp|JPG)$/,
            type: 'asset',
            generator: {
                filename: 'imgs/[hash:8][ext][query]'
            },
            parser: {
                dataUrlCondition: {
                    // 小于 8KB的图片会被Base64 处理
                    maxSize: 8*1024
                }
            }
        }, {
            // 其他资源
            test: /\.(ttf|waff2?|mp4)/,
            type: 'asset/resource',
            generator: {
                filename: 'media/[hash:8][ext][qeury]'
            }
        }, {
            test: /\.html$/,
            loader: 'html-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ],
    mode: 'development',
    devServer: {
        compress: true,
        port: 3000,
        open: true,
        watchFiles: ['./src/index.html']
    }
}