webpack之文件指纹

什么是文件指纹？

打包后输出的文件名的后缀，这个文件指纹通常是用来做版本的管理

文件指纹

文件指纹如何生成

• Hash：和整个项目的构建有关，只要项目文件有修改，整个项目构建的hash值就会更改
• Chunkhash：和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值
• Contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变
  • 如果我们项目中既有js也有css，如果css也使用chunkhash，那么当只修改了js，css没有更改，但是会导致，即使css内容没有变化，发布上去的文件也会发生变化，所以，css通常采用Contenthash生成文件指纹

JS的文件指纹设置

设置output的filename，使用[chunkhash]，chunkhash没办法和热更新一起使用的，不能与HotModuleReplacementPlugin这个插件一起使用，所以我们只在生产环境写

module.exports = {
    output: {
        filename: '[name][chunkhash:8].js', // 8代表取hash的前八位，默认32位
        path: path.join(__dirname, 'dist')
    },
}

CSS的文件指纹设置

设置MiniCssExtractPlugin 的 filename，使用[contenthash]。
安装依赖

npm i -D mini-css-extract-plugin

注意，这个插件没办法与style-loader一起使用，因为它们之间的功能是互斥的，所以需要将style-loader换成MiniCssExtractPlugin.loader。

正常情况下，如果我们使用了style-loader和css-loader的话，那么这个css会由style-loader将css插入到style里面，并且放到head头部，此时并没有一个独立的css文件，因此，我们通常会采用MiniCssExtractPlugin，通过这个插件把这个style-loader的css提取成一个独立的文件，所以，对于这个css的文件指纹，我们会设置在这个MiniCssExtractPlugin里面，给它设置一个filename，并且给它设置一个[contenthash]。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
        plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][contenthash:8].css'
        })
    ],
}

图片的文件指纹设置

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

占位符

module.exports = {
        module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: 'img/[name][hash:8].[ext]',
                            limit: 10240
                        }
                    }
                ]
            }
        ]
    },
}

文件指纹的项目应用

将webpack.config.js文件更名为webpack.dev.js并将内部的mode修改为development，再复制一份文件，更名为webpack.prod.js将mode修改为production。

然后，修改配置文件:

{
    "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",  //表示构建生产环境代码
    "dev": "webpack serve --config webpack.dev.js --open" //表示构建开发环境代码
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

打开文件webpack.prod.js并修改:

module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name]_[chunkhash:8].js',
        path: path.join(__dirname, 'dist')
    },
    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|svg|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: 'img/[name]_[hash:8].[ext]',
                            limit: 10240
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|TTF|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: 'img/[name]_[hash:8].[ext]',
                            limit: 10240
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name][contenthash:8].css'
        })
    ],
    mode: 'production'
};