14webpack之loader

Posted 2021-03-25 燕子fly

webpack之loader作用

loader是一种打包的方案，webpack默认只识别js结尾的文件，当遇到其他格式的文件后，webpack并不知道如何去处理。此时，我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。

      const path = require(‘path‘);

      module.exports = {
        // 模式：可选为：development, 默认为：production
        mode: ‘development‘,
        // 源代码文件夹：src
        entry: {
          main: ‘./src/index.js‘ // 入口文件
        },
        module: {
          rules: [{
              test: /.jpg$/,
              use: {
                  loader: ‘file-loader‘
              }
          }]
        },
        output: {
          filename: ‘bundle.js‘,  // 文件名
          path: path.resolve(__dirname, ‘dist‘)  // 文件夹
        }
      }
  

打包静态资源

file-loader

      const path = require(‘path‘);

      module.exports = {
        mode: ‘production‘,
        entry: {
          main: ‘./src/index.js‘ // 入口文件
        },
        module: {
          rules: [{
              test: /.(jpg|png|gif)$/,
              use: {
                  loader: ‘file-loader‘,
                  options: { // 配置
                    name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                    outputPath: ‘images/‘ // 输出到images文件夹下
                  }
              }
          }]
        },
        output: {
          filename: ‘bundle.js‘,  // 文件名
          path: path.resolve(__dirname, ‘dist‘)  // 文件夹
        }
      }
  

url-loader

url-loader和file-loader都可以打包图片，区别是url-loader会将图片以base64打包到js文件中，当图片过大时，打包的js文件也会过大。所以最佳实践是：将小图片打包为base64，大于某个值的文件打包为图片。如果在配置中不加limit，所有图片都会打包为base64。 下面案例的意思是：超过10kb的文件打包为图片，小于10kb的打包为base64

      npm install url-loader --save-dev
      const path = require(‘path‘);
      
      module.exports = {
        mode: ‘production‘,
        entry: {
          main: ‘./src/index.js‘ // 入口文件
        },
        module: {
          rules: [{
              test: /.(jpg|png|gif)$/,
              use: {
                  loader: ‘url-loader‘,
                  options: { // 配置
                    name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                    outputPath: ‘images/‘, // 输出到images文件夹下
                    limit: 10240 // 超过10kb打包为图片
                  }
              }
          }]
        },
        output: {
          filename: ‘bundle.js‘,  // 文件名
          path: path.resolve(__dirname, ‘dist‘)  // 文件夹
        }
      }
  

字体:file-loader

      const path = require(‘path‘);

      module.exports = {
        mode: ‘production‘,
        entry: {
          main: ‘./src/index.js‘ // 入口文件
        },
        module: {
          rules: [{
              test: /.(eot|ttf|svg)$/,
              use: {
                  loader: ‘file-loader‘          
              }
          }]
        },
        output: {
          filename: ‘bundle.js‘,  // 文件名
          path: path.resolve(__dirname, ‘dist‘)  // 文件夹
        }
      }
      
  

样式:style-loader css-loader

css-loader会理清多个css文件之间的引用关系，最后合并为一个。

style-loader会将css样式挂载到head的style标签中

        npm install style-loader css-loader -D
        sass-loader
        将scss文件编译为css
        
        npm install sass-loader node-sass --save-dev
        const path = require(‘path‘);
        
        module.exports = {
          mode: ‘production‘,
          entry: {
            main: ‘./src/index.js‘ // 入口文件
          },
          module: {
            rules: [{
                test: /.(jpg|png|gif)$/,
                use: {
                    loader: ‘url-loader‘,
                    options: { // 配置
                      name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                      outputPath: ‘images/‘, // 输出到images文件夹下
                      limit: 10240 // 超过10kb打包为图片
                    }
                }
            },{
                test: /.scss$/,
                use: [
                  ‘style-loader‘,
                  ‘css-loader‘,
                  ‘sass-loader‘
                ]
            }]
          },
          output: {
            filename: ‘bundle.js‘,  // 文件名
            path: path.resolve(__dirname, ‘dist‘)  // 文件夹
          }
        }
        详细配置
        
        const path = require(‘path‘);
        
        module.exports = {
          mode: ‘production‘,
          entry: {
            main: ‘./src/index.js‘ // 入口文件
          },
          module: {
            rules: [{
                test: /.(jpg|png|gif)$/,
                use: {
                    loader: ‘url-loader‘,
                    options: { // 配置
                      name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                      outputPath: ‘images/‘, // 输出到images文件夹下
                      limit: 10240 // 超过10kb打包为图片
                    }
                }
            },{
                test: /.scss$/,
                use: [
                  ‘style-loader‘,
                  {
                    loader: ‘css-loader‘,
                    options: { // 配置
                      importLoaders: 1, // scss文件中引用的scss文件也经过下面的一个loader打包
                      modules: true // 开启模块化css,引入的css仅在当前模块有效，而不是全局
                    }
                  },
                  ‘sass-loader‘
                ]
            }]
          },
          output: {
            filename: ‘bundle.js‘,  // 文件名
            path: path.resolve(__dirname, ‘dist‘)  // 文件夹
          }
        }
    

postcss-loader

        为样式加上厂商浏览器前缀

        npm i -D postcss-loader
        const path = require(‘path‘);
        
        module.exports = {
          mode: ‘production‘,
          entry: {
            main: ‘./src/index.js‘ // 入口文件
          },
          module: {
            rules: [{
                test: /.(jpg|png|gif)$/,
                use: {
                    loader: ‘url-loader‘,
                    options: { // 配置
                      name: ‘[name].[ext]‘, // 以源文件名字及格式输出
                      outputPath: ‘images/‘, // 输出到images文件夹下
                      limit: 10240 // 超过10kb打包为图片
                    }
                }
            },{
                test: /.scss$/,
                use: [
                  ‘style-loader‘,
                  ‘css-loader‘,
                  ‘sass-loader‘,
                  ‘postcss-loader‘
                ]
            }]
          },
          output: {
            filename: ‘bundle.js‘,  // 文件名
            path: path.resolve(__dirname, ‘dist‘)  // 文件夹
          }
        }
    

autoprefixer插件

        npm install autoprefixer -D
        postcss.config.js
        
        module.exports = {
            plugins: [
              require(‘autoprefixer‘)
            ]
        }