2021最新webpack5: style-loader

P6 06-style-loader使用

css-loader

只让 webpack 识别 css 语法。

style-loader

将处理好的语法扔到页面上去。

module.exports = {
  module:{
    rules: [
      {
        test: /\.css$/,  // 正则，匹配将要处理的文件(filename)类型
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

loader的执行顺序（从右到左）

['style-loader', 'css-loader']

针对代码(main.js)

import './main.css';

.
├── dist
│   └── bundle.js
├── index.html
├── package.json
├── src
│   ├── main.css
│   ├── main.js
│   └── utils.js
└── webpack.config.js

参考

• https://www.bilibili.com/video/BV1iv411N7jg?p=6&spm_id_from=pageDriver