webpack(七)-----单独提取css样式

最新推荐文章于 2024-09-19 21:09:22 发布

原创最新推荐文章于 2024-09-19 21:09:22 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack学习专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在webpack配置中使用MiniCssExtractPlugin，通过四个步骤详细阐述了CSS样式的独立提取过程，避免了style-loader和MiniCssExtractPlugin.loader的混用，并提到了webpack5以上版本打包HTML时的注意事项。

说明

提取css样式需用到mini-css-extract-plugin插件
第一步：插件安装 npm i mini-css-extract-plugin -D
第二步：引用const MiniCssExtractPlugin = require('mini-css-extract-plugin');
第三步：用MiniCssExtractPlugin.loader替换到原来的style-loader
第四步：放入plugins中

注：MiniCssExtractPlugin.loader和style-loader不能同时使用
注：webpack5以上的打包html请用npm i html-webpack-plugin@next -D

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js', //输出路径 在js文件下
        path: resolve(__dirname, 'build')
    },
    module: { //loader
        rules: [
            { //处理css样式
                test: /\.css$/,
                use: [
                    //创建style标签，将样式放入
                    // 'style-loader' 
                    //  这个loader取代 'style-loader' 。作用：提取js中的css文件,
                    MiniCssExtractPlugin.loader,
                    //将css文件整理到js文件中
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/html/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/build.css' //打包后的路径
        })
    ],
    mode: 'development'
}