css-loader和style-loader

由于webpack只能处理js相关的文件，所以像图片和css资源是处理不了的，css-loader的作用是将css文件转换成webpack能够处理的资源，而style-loader就是帮我们直接将css-loader解析后的内容挂载到html页面当中

案例如下：

// @ts-nocheck
//引入path模块，该模块提供了一些处理文件路径的一些小工具
const path = require('path');
module.exports = {
    //项目打包入口
    entry:'./src',
    // entry: {
    //     index: './src/index.js',
    //     other: './src/other.js'
    // },
    //出口
    output: {
        //打包后的资源放在哪个文件夹下，必须是绝对路径
        //在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。
        path: path.resolve(__dirname, './dist'),
        //打包后的资源文件名
        filename: '[name].js',
    },
    mode: "production", //打包环境
    //处理不认识的模块
    module: {
        rules: [
            //loader模块处理理
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"]
            }
        ]
    },
    // plugins: [new CleanWebpackPlugin()] //插件配置
}