webpack 提取css成单独文件

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