webpack(二)-----打包样式资源

创建一个webpack.config.js配置文件
作用：指示webpack 做什么(当你运行webpack指令时，会加载里面的配置)

所有构建工具都是基于nodejs平台运行的~模块化默认采用commit.js

webpack.config.js配置

//resolve用来拼接绝对路径的方法
const {resolve}= require('path')
 
//webpack配置
module.exports={
    //入口起点:
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名
        filename:'built.js',
        //输出路径
        //__dirname   是node.js的变量 代表当前文件的目录绝对路径
        path:resolve(__dirname,'build')
    },
    //loader的配置
    module:{
        rules:[
            //详细的loader配置
            {
                //匹配哪些文件
                test:/\.css$/,
                // 使用了哪些loader进行处理
                use:[
                    // use数组中loader执行顺序,从右到左，从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commit.js模块加载js中，里面内容是样式字符串
                    'css-loader'
                ]
            }
        ]
    },
    //plugins的配置
    plugins:[
        //详细plugins的配置
    ],
    //模式
    mode:'development',//开发模式
    // mode:'production'

}

use:中写的loader必须进行安装
在这儿需要安装

npm  i css-loader style-loader -D 

打包
直接在终端输入webpack

css的引入需要importeg:import './index.css'