3. webpack - css-loader

webpack只能解析js文件，所以css文件我们需要用加载器loader来解析

npm install --save-dev css-loader
npm install style-loader

用上述两个命令安装style-loader和css-loader依赖；
css-loader：将css资源编译成commonjs的模块到js中
style-loader：将js中的css通过创建style标签的形式添加到html文件中生效

在webpack.config.js配置文件中我们如下配置

const path = require('path');

module.exports = {

    // 入口
    entry: './src/main.js', // 相对路径

    //输出
    output: {

        // 文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'), // 绝对路径

        // 文件名
        filename: 'main.js'
    },

    // 加载器（loader）
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/, // 只检测.css结尾的文件
                use: [
                    "style-loader", // 将js中css通过创建style标签添加到html文件中生效
                    "css-loader", // 将css资源编译成commonjs的模块到js中
                ] // 顺序从右到左 或 从下到上，先执行css-loader，再执行style-loader
            }
        ],
    },

    // 插件
    plugins: [
        // plugin插件的配置
    ],

    // 模式
    mode: 'development'
}

注意！
加载器module-rules的配置中

test用于检测文件是否是以.css结尾的文件
use是一个数组，里面添加"style-loader"和"css-loader";
这个数组的执行顺序是从右向左或从下到上，所以要先执行css-loader，再执行style-loader
还需注意的一点是：如果写了css文件，但是未引入，webpack在打包时并不会编译该css；同理js文件也是

依赖未安装的报错

引入css

编译后的结果