webpack基础篇（十二）：文件指纹

说明

玩转webpack课程学习笔记。

什么是文件指纹

打包后输出的文件名的后缀。

文件指纹如何生成

• Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改
• Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会生成不不同的 chunkhash 值
• Contenthash：根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变

JS 的文件指纹设置

设置 output 的 filename，使用 [chunkhash]。

注意：mode: 'production'

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash].js'
  },
  mode: 'production',
};

图片和字体的文件指纹设置

设置 file-loader 的 name，使用 [hash]。

占位符名称	含义
[ext]	资源后缀名
[name]	文件名称
[path]	文件相对路径
[folder]	文件所在的文件夹
[contenthash]	文件的内容hash，默认是md5生成
[hash]	文件内容的hash，默认是md5生成
[emoji]	一个随机的指代文件内容的emoji

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8].[ext]'
            }
          }
        ]
      },
    ]
  },
};

有无文件指纹打包对比

下面是js、图片、字体的打包对比，css需要另外插件处理

没有文件指纹：

有文件指纹：

CSS 的文件指纹设置

上面的对比没有发现有css文件出现，因为style-loader是将css插入header里。

这里需要安装插件npm i mini-css-extract-plugin -D

mini-css-extract-plugin是生成单独的css文件，但跟style-loader有一定的冲突。

设置 MiniCssExtractPlugin 的 filename， 使用 [contenthash]

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    })
  ]
};