loader 配置处理 .css 文件 .less文件 .scss文件

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  .less  .scss文件都无法被webpack识别打包

.css

cnpm i style-loader css-loader -D

 .less

cnpm i less-loader -D
cnpm i less -D  //内部依赖，不需要放入匹配规则中

.scss

cnpm i sass-loader -D
cnpm i node-sass -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规则

　　　　 { test:/.less$/,use:['style-loader','css-loader','less-loader']}, //配置处理.css文件的第三方loader规则

　　　　 { test:/.scss$/,use:['style-loader','css-loader','sass-loader']}, //配置处理.css文件的第三方loader规则

    ]

  }
};

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

注意：webpack4.0打包的样式文件必须存在，否则配置完成之后会报错