1.之前在項目測試環(huán)境打包的時候，js文件打包出來沒有hash值，但是生產(chǎn)環(huán)境打包出來卻又hash值
當時只配置了 filenameHashing: true，這樣是不夠的
后來在chainWebpack中配置config.output.filename('[name].[hash].js').end()，解決了該問題
2.配置alias可以在引入文件的時候不用寫很長的相對路徑
步驟：
先引入path模塊
|
1
2
3
4
|
const path = require('path') function resolve(dir) { return path.join(__dirname, dir)} |
之后在chainWebpack中設置
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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在項目中任何一個文件改動后就會被重新創(chuàng)建，然后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
| 名稱 | 說明 |
|---|---|
| hash | 代表的是compilation的hash值。compilation在項目中任何一個文件改動后就會被重新創(chuàng)建，然后webpack計算新的compilation的hash值 |
| chunkhash | 代表chunk的hash,模塊發(fā)生改變才會重新生成hash |
| contenthash | 解決改變style文件導致js文件重新生成hash的問題(使用extract-text-webpack-plugin單獨編譯輸出css文件) |
vue-cli舉例
vue-cli腳手架中webpack的配置文件hash, build/webpack.base.conf.js
vue-cli中，hash用于圖片，音視頻，和字體文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
// 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主要用于js文件中
|
1
2
3
|
// 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
|
1
2
3
4
|
// extract css into its own filenew ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css')}), |
至于緩存這一大塊的內(nèi)容，路漫漫，繼續(xù)學習
以上這篇vue-cli3中配置alias和打包加hash值操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_30340185/article/details/84679766
