1.之前在專案測試環境打包的時候，js檔案打包出來沒有hash值，但是生產環境打包出來卻又hash值

當時只配置了 filenameHashing: true，這樣是不夠的

後來在chainWebpack中配置config.output.filename('[name].[hash].js').end()，解決了該問題

2.配置alias可以在引入檔案的時候不用寫很長的相對路徑

步驟：

先引入path模組

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

之後在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();
 },

補充知識：以vue-cli為例，瞭解webpack的hash、chunkhash、contenthash

hash

[hash] is replaced by the hash of the compilation（）. 代表的是cpmpilation的hash。

compilation在專案中任何一個檔案改動後就會被重新建立，然後webpack計算新的compilation的hash值，這個hash值便是hash。

chunkhash

[chunkhash] is replaced by the hash of the chunk. chunk（模組）的hash

代表的是chunk(模組)的hash值。

contenthash

外掛extract-text-webpack-plugin引入的contenthash

vue-cli舉例

vue-cli腳手架中webpack的配置檔案hash,build/webpack.base.conf.js

vue-cli中，hash用於圖片，音視訊，和字型檔案

// 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)(\?.*)?$/,name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
})
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

chunkhash,build/webpack.prod.conf.js

chuunkhash主要用於js檔案中

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

contenthash：build/webpack.prod.conf.js

使用extract-text-webpack-plugin單獨編譯輸出css檔案。extract-text-webpack-plugin提供了另外一種hash值：contenthash

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

至於快取這一大塊的內容，路漫漫，繼續學習

以上這篇vue-cli3中配置alias和打包加hash值操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。