Webpack中使用Loader

Webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 能让 webpack 能够去处理其他类型的文件（比如css类型文件，图片类型等），并将它们转换为有效模块，以供使用

Webpack 把一切文件看作模块，CSS 文件也不例外，所以想打包CSS需要安装css-loader

安装 css-loader

xxxxxxxxxx
npm install --save-dev css-loader@6.7.1

修改配置

修改 webpack.config.js 配置文件

xxxxxxxxxx
const path = require('path');

module.exports = {
  module:{
    rules:[
        {
            test: /\.css$/,
            use: ['css-loader']
        }
    ]
  }
};

增加CSS文件

在 index.js 文件中引入CSS文件

xxxxxxxxxx
import "../src/css/index.css"

此时运行会发现，css样式让然是无法加载的，因为 css-loader 只是能识别css文件

要显示css样式还需要引入 style-loader才可以

安装 style-loader

xxxxxxxxxx
npm install --save-dev style-loader@3.3.1

修改配置

修改 webpack.config.js 配置文件

xxxxxxxxxx
const path = require('path');

module.exports = {
  module:{
    rules:[
        {
            test: /\.css$/,
            use: ["style-loader",'css-loader']
        }
    ]
  }
};

温馨提示

style-loader和css-loader是存在先后顺序的，必须先写style-loader在写css-loader

实时效果反馈

1. 在webpack中可以打包CSS模块，应该安装下列那个包：

A style-loader

B css-loader

C style-loader css-loader

D style-css-loader

答案

1=>C