Webpack妙用：涵盖非js、css文件打包大全，从此你就是打包达人

2024-01-26 20:43:05

在上一篇文章中，我们重点讲解了如何让css兼容处理，以及如何将代码中的css单独提取成独立的css文件，还进行了压缩处理。现在，结合前几篇文章的知识，我们已经了解了在Webpack中如何处理js以及css文件。在掌握了js与css文件处理方法的基础上，如何将html资源、图片资源以及其他资源进行处理呢？接下来我们就来聊聊这些。

1. 打包HTML文件

在webpack中，默认情况下并不会对html文件进行处理。为了打包html文件，我们需要借助一些第三方插件。其中最常用的是html-webpack-plugin。

html-webpack-plugin可以帮助我们完成以下任务：

自动生成html文件
向html文件中注入webpack生成的bundle
自动生成link和script标签，以便浏览器正确加载bundle
自动生成title和meta标签，以便更好地控制页面的标题和元数据

安装html-webpack-plugin：

npm install html-webpack-plugin --save-dev

在webpack.config.js文件中配置html-webpack-plugin：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: './index.html'
    })
  ]
};

在上面的配置中，我们指定了html模板文件（template）和输出的html文件（filename）。运行webpack后，将会自动生成index.html文件，并将生成的bundle注入到html文件中。

2. 打包图片文件

在webpack中，默认情况下也不会对图片文件进行处理。为了打包图片文件，我们需要借助一些第三方插件。其中最常用的是file-loader。

file-loader可以帮助我们完成以下任务：

将图片文件复制到输出目录
为图片文件生成hash值，以便实现缓存
根据需要，对图片文件进行压缩

安装file-loader：

npm install file-loader --save-dev

在webpack.config.js文件中配置file-loader：

const fileLoader = require('file-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: fileLoader,
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};

在上面的配置中，我们指定了图片文件的正则表达式（test）、输出目录（outputPath）和生成的文件名（name）。运行webpack后，将会将图片文件复制到images目录下，并为每个图片文件生成一个hash值，以便实现缓存。

3. 打包其他资源文件

除了html和图片文件外，我们还可以打包其他类型的资源文件，例如字体文件、视频文件、音频文件等。打包这些文件的方法与打包图片文件类似，都可以使用file-loader。

下面是打包字体文件的示例配置：

const fileLoader = require('file-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ttf|woff|woff2|eot|svg)$/,
        use: [
          {
            loader: fileLoader,
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  }
};

打包视频文件的示例配置：

const fileLoader = require('file-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp4|mov|avi)$/,
        use: [
          {
            loader: fileLoader,
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'videos/'
            }
          }
        ]
      }
    ]
  }
};

打包音频文件的示例配置：

const fileLoader = require('file-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp3|wav|ogg)$/,
        use: [
          {
            loader: fileLoader,
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'audios/'
            }
          }
        ]
      }
    ]
  }
};