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