2020-11-24使用 Loader 打包静态资源（样式篇 -

 使用loader打包静态资源（样式篇--上）
      //--插入img
      //npm run bundle运行报错，webpack不知道该怎么处理css这种文件，
      //webpack只知道怎么处理js文件，
      //不知道引入css文件的时候，要干什么,

      //所以打包index.js中的import './index.css'中的时候就会报错了，
      //到webpack.config.js中去配置，
      module.exports = {
        module: {
          rules: [
            {
              test: /\.(jpg|png|gif)$/,
              use:{
                loader:'url-loader',
                options:{
                  name:'[name]_[hash].[ext]', 
                  outputPath:'images/',
                  limit:2048                  
                }
              }
            },
            {
              test: /\.css$/,
              use:['style-loader','css-loader'] 
            }
          ]
        }
      }

      //webpack打包遇到css文件的时候，使用相应的loader,
      //完成相应的打包，
      //打包css文件的时候，一般用到两个loader，
      //use不能使用一个对象了，use使用数组,

      npm install style-loader css-loader -D

  打包流程：
        index.js中引入一个css文件，import './index.css'
        正常来说webpack不知道怎么打包css，
        在webpack.config.js中做了配置，webpack看到css文件
        会用css-loader和style-loader帮我们打包，
        打包好了之后我们的js里面就有了样式相关的内容，


  use:['style-loader','css-loader'] 对应的css-loader和style-loader的作用是什么？
     1. css-loader会帮我们分析出几个css文件之间的关系，最终把这些css文件合并成一段css,
     2. style-loader在得到css-loader生成的css内容之后，style-loader会把这段内容
        挂载到页面的header部分，
     3.打开控制台查看，
      //--img插入

      在处理css文件打包的时候，我们一定要用css-loader配合style-loader
      一起来使用，

1.png 2.png

  有时在代码中不写css，而是写scss或者less或者styles这种样式文件，
  index.js去引入index.scss这个文件，
  //---img插入

      //npm run bundle运行不成功
      //index.js引入.scss结尾的文件，webpack不知道该怎么办？
      //修改webpack.config.js中的配置
      module.exports = {
        module: {
          rules: [
            {
              test: /\.(jpg|png|gif)$/,
              use:{
                loader:'url-loader',
                options:{
                  name:'[name]_[hash].[ext]', 
                  outputPath:'images/',
                  limit:2048                  
                }
              }
            },
            {
              test: /\.scss$/,
              use:[
                'style-loader',
                'css-loader',
                'scss-loader',
                'postcss-loader'
                ] 
            }
          ]
        }
      }
      当遇到scss文件，就用css-loader打包，之后再用style-loader做处理，
      打包成功，样式不起作用，
      打开控制台，查看header,
      这根本不是css语法，这是原始的scss语法，
      浏览器当然不能识别，

      //所以说当我们去打包scss文件的时候，还需要去借助其它额外的loader,
      //帮助我们把scss语法翻译成css语法，
      使用scss-loader,帮助我们做scss文件的编译，（webpack官方文档）
      npm insatll sass-loader node-sass --save-dev

      //在webpack的配置里面，loader是有先后顺序的，
      //从下到上，从右到左

      所以当我们去打包一个scss文件的时候，
      首先会执行一个scss-loader,对scss代码进行一个翻译，翻译成css之后，
      给到css-loader，都处理好之后，
      再给到style-loader，挂载到页面上，

3.png

 在index.scss中，
      body{
       .avatar{
           width:100px;
           height:100px;
           transform:translate(100px,100px);
         }
       }
      //npm run bundle 运行
      //控制台查看，
      //transform未添加前缀-webpick-

      //我们有其它loader帮助我们实现自动添加厂商前缀的功能，
      //postcss-loader
      //npm i -D postcss-loader

      //1.postcss-loader要求我们在目录下创建postcss.config.js文件，
      //在这里面我们可以做一些配置，
      // module.exports = {
      //   parser: 'sugarss',
      //   plugins: {
      //     'postcss-import': {},
      //     'postcss-cssnext': {},
      //     'cssnano': {}
      //   }
      // }
      module.exports = {
        plugins: [
          require('autoprefixer') //这样我们就配置好了postcss要使用的一个插件
        ]
      }
      安装autoprefixer插件
      npm install autoprefixer -D
      //---img插入


      webpack.config.js中我们配置了当我们发现scss文件的时候，
      我们会一次使用postcss-loader,scss-loader,css-loader和style-loader
      然后postcss-loader它有一个配置文件--postcss.config.js,
      当它被引用或者打包的时候，要使用postcss-loader的时候，
      它会去使用autoprefixer的插件，
      做好了webpack的配置后，
      index.scss文件中也有了transform:translate(100px,100px)
      index.js中也引用了import './index.scss'文件
      //---img插入（2）
      //npm run bundle打包运行
      //---img插入
      控制台查看界面，
      transform上自动多了个-webkit-这样一个厂商前缀，
      这就是postcss里面对应的autoprefixer这个插件帮我们添加的厂商前缀，



      //打包样式文件的时候，如何调用postcss这个loader帮我们
      //去处理一些增加厂商前缀的这样一些需求

5.png 6.png 7.png