webpack4.29.x成神之路（六） 使用loader之打包图片

目录

上节：使用plugins

目录结构：

webpack默认只识别js文件，其它文件如图片、字体、样式等都需要安装对应的loader才能识别，本节介绍如何在webpack中处理图片。

修改src/index.js，使其在页面中插入一张图片：

import pic from './images/cover.png';

window.addEventListener('DOMContentLoaded', function() {
  const root = document.getElementById('root');
  const img = new Image();
  img.src = pic;
  root.appendChild(img);
});

这时执行npm run build, 不出意外会报如下错误：

提示缺少能够处理图片的loader, 现在来改一下webpack配置：
webpack.config.js:

// 依赖省略
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash:8].js',
    path: resolve(__dirname, 'bundles')
  },
  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

module里可以针对不同类型的文件配置不同的loader，好让webpack能正确处理。
然后安装loader:
npm i url-loader file-loader -D
ps：url-loader依赖file-loader

安装完成后再次 npm run build, 这次就能成功打包

然后浏览器运行 bundles/index.html:

ok, 成功插入了一张图片。

打开控制台可以看到，图片src是个base:64编码，其实url-loader还有很多配置项，
修改webpack.config.js如下：

url-loader还有很多配置项，修改webpack.config.js如下：

// 省略
module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: [{
        loader: 'url-loader',
        options: {
          // 当图片大于801k时，交给file-loader处理，否则url-loader会把图片src转成base64编码
          limit: 801920,

          // 打包后的文件名
          name: '[name].[hash:8].[ext]',

          // 打包路径
          outputPath: 'images/'
        }
      }]
    }]
  },
// 省略

详细用法参考：https://github.com/webpack-co...

下一节：使用loader之打包样式上