这一章节的代码位于 03_style_handle

引入模块(module)的概念

  • 各种 loader 的使用 https://webpack.js.org/concepts/#loaders
  • 需要将样式文件作为模块导入
  • css本身也需要互相作为模块引入 @import "xxx.css"
  • css最终需要打包进html, 也需要loader
  • scss, less, stylus, postCss等转为css的loader

在 webpack.config.js 文件中新建module对象用于配置各种loader 和规则
image.png

安装css-loader和style-loader yarn add css-loader style-loader -D

css-loader

  • 用于解析 @import 'xxx.css' 语法

image.png

style-loader

  • 用于把css插入head标签中

image.png

如注释所写, 当存在多个loader时, 需要写成数据形式, 并且默认执行顺序为从右向左, 所以上面是先执行css-loader将css模块打包, 再用style-loader把css插入head

效果展示

  • src目录下新建 index.css 和 common.css 并写一些样式, 在 index.css 中引入 common.css
  • 在 index.js 中用 require('./index.css') 的方式引入css
  • 把环境改为开发环境, 运行后打开页面检查效果

image.png
样式文件顺利导入到html页面