Webpack 的 loader 配置

加载 CSS

所需依赖

🎉 LOADERS

1. less-loader/sass-loader/stylus-loader
2. postcss-loader
3. css-loader
4. style-loader/
5. MiniCssExtractPlugin.loader

🎉 PLUGINS

1. mini-css-extract-plugin
2. autoprefixer

1. 加载 CSS 的两种形式

1. 通过 style-loader 加载到 <style> 标签中

   {
     test: /\.css$/,
     use: [
       {
         loader: 'style-loader',
         options: {
           insertAt: 'top'
         },
       },
       'css-loader',
     ],
   },
   

2. 通过 mini-css-extract-plugin 将所有 css 提取到 <link> 标签的 CSS 文件中

   {
     test: /\.styl$/,
     use: [
       {
         loader: MiniCssExtractPlugin.loader,
         options: {
           publicPath: './dist/',
         },
       },
       'css-loader',
       'postcss-loader',
       'stylus-loader',
     ],
   },
   

2. 为 CSS 添加浏览器引擎前缀

在匹配到 css 文件时需要添加 postcss-loader, 上方已有示例

此外还需要在根目录下新建 postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}

加载 Images

所需依赖

🎉 LOADERS

1. file-loader
2. html-loader
3. url-loader

1. 加载 Images 的三种方式

1. 通过 JavaScript 加载

   // index.js
   import Pic from './webpack01.png';
   
   const newImage = new Image();
   newImage.src = Pic; // 赋予
   
   // webpack.config.js
   rules: [
     {
       test: /\.(png|svg|jpg|gif)$/,
       use: [
         {
           loader: 'file-loader'
         }
       ]
     }
   ]
   

2. 通过 CSS 加载

   #app {
     color: orangered;
     font-size: 0.5rem;
     width: 200px;
     height: 300px;
     background: url('./webpack01.jpg')
   }
   

   其余的按照上方的配置即可

3. 通过 HTML 加载

   // index.html
   <img src="./webpack01.jpg" alt="">
     
   // webpack.config.js
   rules: [
     {
       test: /\.html$/,
       use: [
         {
           loader: 'html-loader',
           options: {
             attrs: ['img:src'], // 此处匹配上方的 img 标签 src 属性
           }
         }
       ]
     }
   ]
   

2. 优化 Images 加载

针对一些晓得图片没必要发送 HTTP 请求获取图片, 直接将图片转为 base64 的形式即可

// webpack.config.js
rules: [
  // 需要注释掉 file-loader 这个匹配否则还会继续匹配然后生成图片
  // {
  //   test: /\.(png|svg|jpg|gif)$/,
  //   use: [
  //     {
  //       loader: 'file-loader'
  //     }
  //   ]
  // },
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 20*1024 // 小于 20k 的图片转为 base64 
        }
      }
    ]
  }
]

加载 Font(字体)

所需依赖

🎉 LOADERS

1. file-loader
2. url-loader

1. 加载 Font 的两种方式

1. 使用 file-loader

   // webpack.config.js
   rules: [
     {
       test: /\.(woff|woff2|eot|ttf|otf)$/,
       use: [
         {
           loader: 'file-loader',
         }
       ]
     }
   ]
   

   /* style.css */
   @font-face {
     font-family: 'ShanFont';
     src: url('./ShanHunTianGeMoJi-2.ttf');
     font-weight: 600;
     font-style: normal;
   }
   
   .shan {
     font-family: 'ShanFont';
     color: blueviolet;
   }
   

2. 使用 url-loader

   url-loader 更进一步可以对资源的大小进行判断, 然后是否转成 base64 的资源