webpack 提取css成单独文件

墨蓝 2023-01-10 05:29 129阅读 0赞

# webpack 提取css成单独文件 #

// 用来拼接绝对路径的方法
    const {
        resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    
    module.exports = {
        
        // webpack 配置
    
        // 入口起点
        entry : './src/index.js',
        // 输出
        output : {
        
            // 输出文件名
            filename : 'js/built.js',
            // 输出路径
            path : resolve(__dirname, 'dist')
        },
        // loader 配置
        module : {
        
            rules : [
                // 详细 loader 配置
                // 不同文件必须配置不同 loader 处理
                {
        
                    test : /\.css$/, // 匹配哪些文件
                    //使用哪些 loader 进行处理
                    use: [ 
                        // use 数组中的 loader 执行顺序：从右到左，从下到上依次执行
                        // 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效
                        // 'style-loader', 
                        // 这个 loader 取代 style-loader 。作用：提取js中的css成单独文件
                        MiniCssExtractPlugin.loader,
                        // 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串
                        'css-loader' 
                    ]
                }
            ]
        },
        // plugins 的配置
        plugins : [
            // 详细 plugins 的配置
            // html-webpack-plugin
            // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
            new HtmlWebpackPlugin({
        
                // 增加一个配置
                // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
                template : './src/index.html'
            }),
            new MiniCssExtractPlugin({
        
                // 输出文件名
                filename: 'css/bulit.css'
            })
        ],
        //模式
        mode : 'development', // 生产模式
        // mode : 'production' // 开发模式
    }