css-loader和style-loader

一.安装css-loader

1.开发环境安装css-loader

npm i css-loader -D 

2.在webpack.config.js中引入css-loader(三种方法)

const path = require('path')
module.exports = {
    entry : './src/main.js',
    output: {
        "filename": "build.js",
        "path": path.resolve(__dirname,'build')
    },
    module:{
        rules:[  //如下三种方法
//方法1
            /*{
                test: /\.css$/,  //一般就是一个正则表达式，用于匹配我们需要处理的文件类型
                use:[
                    {
                        loader: 'css-loader'
                    }
                ]
            },*/
//方法2
            /*{
                test: /\.css$/,  //一般就是一个正则表达式，用于匹配我们需要处理的文件类型
                loader: 'css-loader'
            },*/
//方法3
            {
                test: /\.css$/,  //一般就是一个正则表达式，用于匹配我们需要处理的文件类型
                use: ['css-loader']
            }
        ]
    }
}

3.引入后npm run build，仍然无法显示样式，什么原因？
因为没有安装style-loader

image.png

二.安装style-loader

1.开发环境安装style-loader

npm i style-loader -D 

2.在webpack.config.js中引入style-loader
默认规则：引入的loader从下往上，从右往左扫描

const path = require('path')
module.exports = {
    entry : './src/main.js',
    output: {
        "filename": "build.js",
        "path": path.resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test: /\.css$/,  //一般就是一个正则表达式，用于匹配我们需要处理的文件类型
                use: ['style-loader','css-loader']
            }
        ]
    }
}

3.引入css-loader和style-loader后npm run build，正常显示

image.png