在webpack中打包CSS文件

1.先在入口文件中引入CSS文件

2.创建一个webpack.config.js文件nfig.js文件

/**
 * webpack配置文件
 * 指示webpack怎么操作
 * 此构建工具基于nodejs
 */
//resolve用来拼接绝对路径的方法
const { resolve } = require("path");
module.exports={
    entry:"./src/index.js",//入口起点
    //输出
    output:{
        //输出文件名
        filename:"built.js",
        //写的绝对路径
        //__dirname代表当前文件的目录绝对路径
        path:resolve(__dirname,"bubild")
    },
    module:{
        
        //loader配置
        rules:
        [
           {
            //test匹配哪些文件
            test: /\.css$/,
            //use使用哪些loader进行处理
            use:[
                //创建style标签，将JS中的样式资源插入到head
                "style-loader",
                //将CSS模块加载到JS中
                "css-loader"
            ]
           }
        ]
    },
    
    plugins:
    [],
    mode:"development"
}

3.初始化

npm init
npm i webpack webpack-cli -D
npm i style-loader css-loader -D

4.打包

6.使用