webpack 学习笔记4

资源模块加载

webpack是整个前端工程的打包工具，所以通过webpack引入任何类型的文件是可能的。

让我们试着把css引入

1. 在src目录下创建css文件

2. 把webpack.config.js中的入口文件改为该文件

3. yarn webpack 打包

4. 非法字符报错，ERROR in ./src/main.css 1:4 Module parse failed: Unexpected token (1:4)

5. 原因是webpack默认处理js文件，根据提示修改 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 即需要配置处理该文件的加载器(loader)

6. yarn add css-loader --dev 安装css加载器，css-loader 的作用是将css文件转换成js模块

7. 并在配置文件中添加属性 module:{rules:[test匹配路径,use指定对应的加载器]} 用于其他资源模块的加载规则配置

   1. module:{
          rules:[
              {
                  test: /.css$/,
                  use: 'css-loader'
              }
          ]
      }
      

8. 页面未出现样式，需要安装style-loader将css-loader转化的结果 yarn add style-loader --dev

9. 添加到配置文件中，注意 loader 是从后往前执行的，所以css放后面

   1. module:{
          rules:[
              {
                  test: /.css$/,
                  use: ['style-loader','css-loader']
              }
          ]
      }
      

   2. 通过style标签追加到页面上

   再次运行，成功

总结：Loader是webpack的核心特性，借助它可以加载任意类型的资源.