03-loader使用

loader其实就是解析器，用来解析模块的，前面说到过webpack只认识js和json文件。配置方式如下：

• module.rules
• rules下放的是一个个的rule，一个rule对应一种解析规则。rule是一个对象，可设置多个属性：
  • test：对于模块资源进行匹配，通常使用正则表达式
  • use：
    • loader：必须有一个loader，对应的值为一个字符串；
    • options：可选属性，值为字符串或对象，值会被传到loader中。
  • loader：rule.ues的简写。

处理css

css样式

1. 安装用来解析css的loader：npm i css-loader style-loader

2. 在webpack的配置文件中使用配置css的解析规则：

    module:{
       rules:[
         {
           test:/\.css$/,
           use:["style-loader","css-loader"]
         }
       ]
     }
   

经过上述操作我们就可以使用css了，下面进行css使用的测试：

1. 在src下新建style目录，并在目录下编写index.css文件。

   body,
   html {
     height: 100%;
     padding: 0px;
     margin: 0px;
   }
   
   #app {
     color: #1890FF;
     text-align: center;
     font-weight: 700;
     line-height: 100px;
   }
   

2. 在index.js文件中引入index.css。

   import './style/index.css'
   

3. 重新执行npm run serve可以看到页面的字体的样式。（每次修改webpack的配置都需要重启服务）

使用less

1. 安装解析less的loader：npm i less less-loader

2. 编写less解析的规则

   {
       test:/\.less$/,
       use:["style-loader","css-loader","less-loader"]
   }
   

使用postCSS

PostCSS是一个通过JavaScript来转换样式的工具；这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；但是实现这些工具，我们需要借助于PostCSS对应的插件。

如何使用PostCSS

1. 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader
2. 选择可以添加你需要的PostCSS相关的插件

postcss-loader

在webpack中使用postcss就是使用postcss-loader来处理的；安装：npm install postcss-loader autoprefixer -D

rules:[
      {
        test:/\.css$/,
        use:["style-loader","css-loader",{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:[
                require("autoprefixer")
              ]
            }
          }
        }]
      }
]

比如：**user-select: none;**会被打包为：

#app{
    height:100%;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

postcss-preset-env

比autoprefixer更好用，可以把十六进制八位转为rgba。npm install postcss-preset-env -D

rules:[
      {
        test:/\.css$/,
        use:["style-loader","css-loader",{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:[
                require("postcss-preset-env")
              ]
            }
          }
        }]
      }
]

postcss.config.js

将postcss的配置单独抽出来。

module.exports = {
  plugins:[
    require('postcss-preset-env')
  ]
}

@import样式处理

在我们使用@import的时候，如果按照上述写法配置webpack则不会让postcss处理@import的CSS，因为是通过js去先找到当前的css由于@import是CSS语法，所以不会让postCSS解析，下面这个配置可以让其加载。

rules:[
      {
        test:/\.css$/,
        use:["style-loader",{
          loader:"css-loader",
          options:{
            importLoaders:1
          }
        },{
          loader:"postcss-loader",
          // 可以在postcss.config.js里面配置
          // options:{
          //   postcssOptions:{
          //     plugins:[
          //       require("autoprefixer")
          //     ]
          //   }
          // }
        }]
      }
]

封装style处理规则loader

因为关于style样式处理用相同的一部分，所以封装简写代码

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const getCssLoaders = (loaders = []) => ( ['style-loader', {
  loader: 'css-loader',
  options: {
    importLoaders: 1
  }
}, 'postcss-loader' , ...loaders])

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, './dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.less$/,
        use: getCssLoaders([ 'less-loader'])
      },
      {
        test: /\.css$/,
        use: getCssLoaders()
      }
    ]
  }
}

处理图片svg资源

file-loader使用

1. 安装file-loader：npm i file-loader
   文件的名称规则

• [ext]： 处理文件的扩展名；
• [name]：处理文件的名称；
• [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
• [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
• [hash:]：截图hash的长度，默认32个字符太长了；
• [path]：文件相对于webpack配置文件的路径；

2. 配置规则

   {
           test: /\.(png|jpe?g|gif|svg)$/,
           use: [
             {
               loader: 'file-loader',
               options: {
                 name: "[name].[hash:6].[ext]",
                 outputPath:'img'
               }
             }
           ]
    }
   

url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI

• npm install url-loader -D
• 但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可
  • 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
  • 而大的图片也进行转换，反而会影响页面的请求速度；
• 如何可以限制哪些大小的图片转换和不转换
• url-loader有一个options属性limit，可以用于设置转换的限制

{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: "img/[name].[hash:6].[ext]",
              limit: 100 * 1024
            }
          }
        ]
}

处理TS文件

• 可以通过TypeScript的compiler来转换成JavaScript：npm install typescript -D
• 另外TypeScript的编译配置信息我们通常会编写一个tsconfig.json文件tsc --init
• 之后我们可以运行 npx tsc来编译自己的ts代码：npx tsc

需要安装全局的TypeScript环境，使用npm i -g typescript ,可以使用tsc -V查看版本。

使用ts-loader

如果我们希望在webpack中使用TypeScript，那么我们可以使用ts-loader来处理ts文件：npm install ts-loader -D

 {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: "ts-loader"
  }

也可以使用@babel/tranform-typescript配合babel使用