webpack处理 非 js 类型的文件

webpack处理 非 js 类型的文件

在初次碰到 webpack 的时候你是否有这样的困惑？
在项目的jS入口文件中导入 css样式表

import './css/index.css'

却发现报错！！无法使用，这是怎么回事呢？看看解决方式吧……

如果要处理 非 js 类型的文件，我们需要手动安装一些 合适的 第三方 loader 加载器；

1.如果想要打包处理 css 文件，需要安装：

cnpm i style-loader css-loader -D

2.打开 webpack.config.js 这个配置文件，在里面，新增一个配置节点，叫做 module，它是一个对象；在 这个 module 对象身上，有一个 rules 属性，这个 rules属性是个 数组；这个数组中存放了所有第三方文件的配置 和处理规则；

module: {   //这个节点，用于配置  所有的第三方模块 加载器
  rules: [    //所有第三方模块的 匹配规则
    { test:/\.css$/, use:['style-loader','css-loader'] },   //配置处理 .css 文件的第三方loader 规则
  ]
}

注意：webpack 处理第三方文件类型的过程

1.发现这个 要处理的文件 不是 JS 文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
2.如果能找到对应的规则，就会调用 对应的 loader 处理 这种文件类型
3.在调用loader 的时候，是从后往前调用的；
4.当最后的一个 loader 调用完毕，会把处理的结果，直接交给 webpack 进行打包合并，最终输出到bundle.js中去