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' // 开发模式

}

webpack 提取css成单独文件的相关教程结束。