Configuring alias and Packing Plus hash Values in vue cli3

1. Before, when the project test environment was packaged, the js file was packaged without hash value, but the production environment was packaged with hash value

At that time, only filenameHashing: true was configured, which was not enough

This problem was later resolved by configuring config. output. filename ('[name]. [hash]. js'). end () in chainWebpack

2. Configure alias to import files without writing long relative paths

Steps:

Introduce path module first

const path = require('path') 
function resolve(dir) {
 return path.join(__dirname, dir)
}

After that, set in chainWebpack

 chainWebpack(config) {
 
  config.resolve.alias
   .set('style', resolve('public/style'))
   .set('api', resolve('src/api'))
   .set('tools', resolve('src/tools'))
   .set('components', resolve('src/components'))
   .set('echarts', resolve('src/echarts'))
   .set('echarts', resolve('node_modules/echarts'))
 
  config.output.filename('[name].[hash].js').end();
 },

Supplementary knowledge: Take vue-cli as an example to understand hash, chunkhash and contenthash of webpack

hash

[hash] is replaced by the hash of the compilation (). Represents hash of cpmpilation.

compilation is recreated after any file changes in the project, and then webpack calculates the hash value of the new compilation, and this hash value is hash.

chunkhash

[chunkhash] is replaced by the hash of the chunk. hash for chunk (Module)

Represents the hash value of chunk (module).

contenthash

contenthash introduced by plug-in extract-text-webpack-plugin

名称	说明
hash	代表的是compilation的hash值。compilation在项目中任何1个文件改动后就会被重新创建，然后webpack计算新的compilation的hash值
chunkhash	代表chunk的hash,模块发生改变才会重新生成hash
contenthash	解决改变style文件导致js文件重新生成hash的问题(使用extract-text-webpack-plugin单独编译输出css文件)

Examples of vue-cli

Configuration files for webpack in vue-cli scaffolding hash, build/webpack. base. conf. js

In vue-cli, hash is used for picture, audio and video, and font files

// hash(hash,jpg,mo4,txt)
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
})
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

chunkhash,build/webpack.prod.conf.js

chuunkhash is mainly used in js files

// chunkhash,js
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

contenthash: build/webpack. prod. conf. js

Compile the output css file separately using extract-text-webpack-plugin. extract-text-webpack-plugin provides another hash value: contenthash

  // extract css into its own file
  new ExtractTextPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css')
  }),

As for caching this large block of content, it's a long way to go. Keep learning