2021-07-19

1. 导入css样式表(非js模块) 用import +相对路径
2. 导入js模块 如jquery 则用 import $ from ‘jquery’
3. webpack默认只能处理打包js的文件，不能处理打包非js的文件 如果我们要处理一些非js的文件，则需要我们手动安装一些第三方 loader 加载器来打包文件
4. 如果想要打包处理一些css文件 需要安装 加载器
   1.输入命令： npm i style-loader css-loader -d
   2.同时在webpack.config.js中新增加一个配置节点叫做 module （它是一个对象），module对象身上有一个rules（数组）属性，rules存放了所有第三方文件的匹配和处理规则。
   表示test正则匹配到的文件用use里面的加载器去处理 在调用loader的时候是从后往前调用的 当最后的一个loader调用完毕之后，会把处理的结果直接交给webpack进行打包 最终输出到bundle.js中
   安装less-loader 输入命令npm i less-loader -d 回车显示还需安装less 输入命令 npm i less -d
   安装sass-load 输入命令 npm i sass-loader -d 回车显示还需安装node-sass 输入命令 npm i node-sass -d

module:{//这个节点 用于配置所有第三方加载器
    rules:[
      { test:/\.css$/ ,use:['style-loader','css-loader']},
      { test:/\.less$/ ,use:['style-loader','css-loader','less-loader']},// 这是处理less文件的第三方loader配置
      { test:/\.scss$/ ,use:['style-loader','css-loader','sass-loader']},// 这是处理scss文件的第三方loader配置
      { test:/\.(png|jpg|gif|jpeg|bmp)/,use:'url-loader？limit=7631&name=[hash:8]-[name].[ext]'}, // 这是处理url的第三方loader配置
    ]
  }

5. webpack 处理不了css下的url地址 无论是图片还是字体库 此时需要安装第三方加载器
   输入命令 npm i url-loader file-loader -d (limit给定的值是图片的大小，单位是byte字节 ，我们我们引用的图片，大于或等于给定的limit值 时，则不会被转为base64格式的字符串，如果图片小于给定的limit值 则会被转为base64 的字符串 [name].[ext]则是还原图片原来的名字)
6. 如果所插入的图片名字一样，为了区分名字 可以在前面加上 哈希值 [hash:8]-（<=32位）,
7. JSON文件里面不能写注释！！！