loader 配置处理 .css 文件

main.js

//使用 import 语法导入css样式表

 import './css/index.css'

//注意：webpack默认只能打包处理js文件，无法处理其他的非js类型文件，如果要处理，需要手动安装一写合适的第三方 loader 加载器
//1.如果要打包处理css文件，需要安装cnpm i style-loader css-loader -D
//2.打开webpack.config.js这个配置文件，在里面新增一个配置节点，叫做module，它是一个对象，在这个module对象身上，有个rules属性，这个rules属性是个数组;这个数组中存放了所有对第三方文件的匹配和处理规则；

运行npm run dev 发现 src 下的 css 文件夹中的 .css 文件无法被webpack识别打包

cnpm i style-loader css-loader -D

webpack.config.js

const path = require('path');

//这个配置文件，起始是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
  entry: './src/main.js',     //入口，表示要使用webpack打包哪个文件
  output: {
    filename: 'bundle.js',  //这里是输出文件的名称
    path: path.resolve(__dirname, 'dist')   //指定打包好的文件输出到了那个目录中去
  },

  plugins:[],

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

  }
};

配置成功后，运行 npm run dev,页面已经出现了css样式，此时说明 .css 文件打包成功了

cnpm i style-loader css-loader -D