webpack 使用Loader 打包静态资源 - 图片

file-loader

之前我们使用如下的配置代码，进行了项目的打包

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.png$/,
      use: {
        loader: 'file-loader'
      }
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

打包后文件如下。

我们可以看到 png 图片打包后的名字变得很长。如果我们想要打包后，图片名称保持不变，那么就需要对loader 做额外的配置。配置loader 我们可以将参数放在一个配置项options 里面。如下。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.png$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

使用命令打包后。生成的图片文件名就与原来一样了。

上面使用[name].[ext] 这种配置的语法，我们叫做 placeholder 占位符。

可以在webpack 官网 documentation > loaders > file-loader > placeholder 中查到更多的信息。

然后我们，可以把test 中正则改一下，把常用的图片后缀加上，如下。

  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    }]
  },

另一种情况，当我们想要把图片打包放在 img 文件夹下的话，可以如下配置。

  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/'
        }
      }
    }]
  },

url-loader

url-loader 除了能做file-loader 能做的事情外，还能做额外的一些事。

我们先试一下，将webpack.config.js 中的 “file-loader” 改为 “url-loader” ，如下。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/'
        }
      }
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}

然后使用命令安装url-loader，如下。

npm install url-loader --save-dev

然后使用命令 npm run bundle 打包。

好啦，发现网页照常，但是打包后文件确没有图片了。

这是因为，当要打包图片的时候，如果使用的是url-loader 的话，它会直接将图片转化为base64 的字符串，然后放在js 里面。它不会生成图片文件。

这里，将图片放在js 里面，省略了一次http 请求去寻找图片，但是如果图片很大，那么js 打包后的文件也会很大，那么加载js 的时间就会很长，那么页面加载的时候可能要空白很长时间。因此，当一个图片很小，1、2kb 那么使用url-loader 是一个很好的选择。反之，还是使用file-loader 比较好。

这种情况，就可以这样配置。limit 中的单位为字节。如果超过limit，那么url-loader 就会像file-loader 一样使用，否则，就会像前面一样将图片放在js 里。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'imgs/',
          limit: 20480
        }
      }
    }]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bundle')
  }
}