webpack 文件指纹的配置

执行前，先保证webpack项目能正常运行

准备

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

js文件指纹的配置，设置 output 的 filename，使用 [chunkhash]

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

CSS 的文件指纹设置,设置 MiniCssExtractPlugin 的 filename，使用 [contenthash]

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

图片的文件指纹设置，设置 file-loader 的 name，使用 [hash]

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

开始配置

重命名 wenpack.config.js 为 webpack.prod.js

// ...
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引进新插件
/**
mini-css-extract-plugin：将css样式抽出生成外部样式；与style-loader更好相反，style-loader是将css样式统一插入head区；所以，这里只能二选一；
*/
module.exports = {
  entry:{
    // ...
  },
  output:{
    // ...
    filename: '[name]_[chunkhash:8].js' // 采用chunkhash,后面 冒号+8 意思是取前8位hash值
  },
  mode:'production',
  module:{
    rules:[
      // ...
      {
        test: /.css$/, // css 指纹配置
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /.less$/, // css 指纹配置
        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|otf)$/,
        use:[
          {
            loader:'file-loader',
            options:{
              name: '[name]_[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({ // 引入并配置css插件
      filename: '[name]_[contenthash:8].css'
    })
  ]
}

配置 package.json

{
  // ...
  "scripts": {
  	// ...
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.dev.js --open"
    // ...
  },
  // ...
}

至此，文件指纹已配置完毕，直接cmd终端输入 npm run build 看效果