webpack--css文件打包(三)

目录结构

src/css/index.css

body{
    background-color: red;
    color: white;
}

entry.js

import css from './css/index.css';
document.getElementById('title').innerHTML = "hello111";

webpack.config.js

rules说明

1. test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
2. use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
3. include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
4. query：为loaders提供额外的设置选项（可选）。

loader说明

1. style-loader <link rel="stylesheet" href="">
2. css-loader 标签

写法一

module: {
        //规则
        rules: [
            {
                //正则表达
                test: /\.css$/,
                // 要用什么loader
                use: ['style-loader', 'css-loader']
            }
        ]
    },

写法二

module: {
        //规则
        rules: [
            {
                //正则表达
                test: /\.css$/,
                // 要用什么loader
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }]
            }
        ]
    },

npm run server