webpack之文件指纹策略

一、什么是文件指纹？

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

• 用于做版本管理

二、文件指纹如何生成

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

三、JS 的文件指纹设置

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

module.exports = {
    entry: {
        app: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name][chunkhash:8].js'
    }
}

四、CSS 的文件指纹设置

MiniCssExtractPlugin

• 将 CSS 提取到单独的文件中
• 为每个包含 CSS 的 JS 文件创建一个 CSS 文件
• 支持按需加载 CSS 和 SourceMaps

• 安装

npm i mini-css-extract-plugin -D

• 设置 MiniCssExtractPlugin 的 filename，使用 [contenthash]

module.exports = {
    entry: {
        app: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name][chunkhash:8].js'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][contenthash:8].css'
        })
    ]
}

五、图片的文件指纹设置

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

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

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname + 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name][hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    }
}

六、实践

• webpack.prod.js

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:8].js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    + MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    + MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                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]'
                        }
                    }
                ]
            }
        ]
    },
    + plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]
}

• package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --config webpack.dev.js --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.14.5",
    "@webpack-cli/serve": "^1.5.2",
    "babel-loader": "^8.0.5",
    "css-loader": "^3.2.0",
    "file-loader": "^3.0.1",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^0.23.1",
    "url-loader": "^4.1.1",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
}