摘要：在的配置項中，可能會見到這樣的字符。的情況的可以指定。值是特定于整個構(gòu)建過程的。。因此，以上兩個值中更推薦的是。中的則和前面的一樣，指定了結(jié)果的截取長度。的情況被引用的通過來得到帶的文件。所以，這可能并不是我們想要的。

在webpack的配置項中，可能會見到hash這樣的字符。

當存在hash配置的時候，webpack的輸出將可以得到形如這樣的文件：

page1_bundle_54e8c56e.js

這種帶哈希值的文件名，可以幫助實現(xiàn)靜態(tài)資源的長期緩存，在生產(chǎn)環(huán)境中非常有用。關(guān)于這一點的詳細內(nèi)容，可以參考這篇久遠的大公司里怎樣開發(fā)和部署前端代碼。

下面是一個帶hash輸出的webpack配置的例子(webpack v3.0.0)：

var env = {
    src: path.resolve(__dirname, "./src"),
    output: path.resolve(__dirname, "./dist"),
    publicPath: "/"
};

module.exports = {
    entry: {
        "page1": "./page1",
        "page2": "./page2"
    },
    context: env.src,
    output: {
        path: env.output,
        filename: "./[name]/bundle_[chunkhash:8].js",
        publicPath: env.publicPath
    },
    devtool: false,
    module: {
        rules: [{
            test: /.(png|jpg)$/,
            use: "url-loader?limit=8192&name=[path][name]_[hash:8].[ext]"
        }, {
            test: /.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./[name]/style_[contenthash:8].css"
        })
    ]
};

可以看到，有多個地方都出現(xiàn)了hash這個詞，但形式不太一樣。

output的filename可以指定hash。有兩個值可以選擇：

[hash]。hash值是特定于整個構(gòu)建過程的。

[chunkhash]。hash值是特定于每一個文件的內(nèi)容的。

我們理想的緩存設(shè)計是，在一次版本更新(重新構(gòu)建)后，只有當一個文件的內(nèi)容確實發(fā)生了變化，它才需要被重新下載，否則應(yīng)使用緩存。

因此，以上兩個值中更推薦的是[chunkhash]。你也可以閱讀這篇官方的緩存指南了解更多細節(jié)。

url-loader和file-loader是同一家，參照file-loader文檔可知，文件名name可以使用標識符[hash]來啟用hash。此外，你還可以按照[:hash::]的格式更詳細地定制hash結(jié)果。

[hash:8]中的:8則和前面output的一樣，指定了hash結(jié)果的截取長度。

被引用的css通過extract-text-webpack-plugin來得到帶hash的文件。參照extract-text-webpack-plugin文檔，在指定生成文件的文件名filename時可以使用標識符[contenthash](可以看到，和之前的并不相同)。

當靜態(tài)資源的文件名變成這樣的帶哈希值的版本后，引用這些靜態(tài)資源就需要稍多花一點工夫。

如果沒有任何服務(wù)端，只是純html、css、js的前端應(yīng)用的話，一般使用html-webpack-plugin。

例如，新建一個index.ejs模板文件如下：

然后增加html-webpack-plugin到webpack：

{
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.ejs"
    })
  ]
}

執(zhí)行一次webpack構(gòu)建，得到生成的index.html：

可以看到，html-webpack-plugin在模板文件內(nèi)容的基礎(chǔ)上，就添加好了需要引用的bundle js。如果還有生成的css文件(通過extract-text-webpack-plugin)，也會被添加到適當?shù)奈恢谩?/p> 純前端、多頁的情況

如果webpack有多個entry文件，例如本文最前面給出的例子：

{
    entry: {
        "page1": "./page1",
        "page2": "./page2"
    }
}

在這種情況下，html-webpack-plugin會把全部entry的輸出都集中到一個.html里。所以，這可能并不是我們想要的。

我們更希望的是為每一個entry生成一個.html。這時候，可以使用的是multipage-webpack-plugin。這個插件實際也依賴了html-webpack-plugin。

例如，有這樣的目錄結(jié)構(gòu)：

.
├─ package.json
├─ src
│   ├─ page1
│   │   ├─ index.css
│   │   ├─ index.ejs
│   │   ├─ index.js
│   │   └─ potofu.jpg
│   └─ page2
│       ├─ index.css
│       ├─ index.ejs
│       └─ index.js
└─ webpack.config.js

然后在webpack配置文件中加入multipage-webpack-plugin：

{
  plugins: [
    new MultipageWebpackPlugin({
        htmlTemplatePath: "[name]/index.ejs",   // 源模板文件的位置
        bootstrapFilename: "manifest.js",
        templatePath: "[name]"  // 輸出html文件的路徑
    }),
  ]
}

[name]標識符對應(yīng)的是每一個entry的名稱(注意，在本文的時間點，需要使用multipage-webpack-plugin的master分支，也就是最新版，才支持此標識符)。在這個例子中，只有兩個取值：page1，page2。

bootstrapFilename如字面意義，是指保存webpack的bootstrap代碼的文件命名。而webpack的bootstrap代碼被這樣多帶帶放到一個文件里，是因為multipage-webpack-plugin在內(nèi)部(強行)為你啟用了CommonsChunkPlugin。

執(zhí)行一次webpack構(gòu)建，得到的輸出結(jié)果：

dist
├─ manifest.js
├─ page1
│   ├─ bundle_29862ad6.js
│   ├─ index.html
│   ├─ potofu_26766d43.jpg
│   └─ style_0b5ab6ef.css
├─ page2
│   ├─ bundle_6a9c6f12.js
│   ├─ index.html
│   └─ style_914dffd0.css
└─ shared
    └─ bundle_9fa1a762.js

取其中一個page1/index.html，內(nèi)容是：

    
    
    



    
page1
    
    
    





<var id="uee0e"><optgroup id="uee0e"></optgroup></var>
<u id="uee0e"></u>
<sub id="uee0e"><p id="uee0e"></p></sub>
<sub id="uee0e"><rt id="uee0e"></rt></sub>
<sub id="uee0e"><p id="uee0e"></p></sub>

可以看到，關(guān)聯(lián)的css、js靜態(tài)資源，都已被正確添加。

如果是帶服務(wù)端的應(yīng)用，引用帶hash的資源文件將是另一個思路。

常見的做法是，為所有的靜態(tài)資源生成一個.json清單文件，然后在服務(wù)端讀取這個.json，然后把清單信息提供給模板文件，由此來正確地引用所需的靜態(tài)資源。

插件webpack-manifest-plugin或assets-webpack-plugin都可以幫助完成這一點。

請看一個Spring Boot(1.5.3.RELEASE) & Thymeleaf(2.1)的例子。這里選擇webpack-manifest-plugin。

首先，在webpack的配置中加入這個插件：

{
  plugins: [
     new ManifestPlugin()
  ]
}

執(zhí)行webpack構(gòu)建，即生成一個資源清單文件manifest.json(位置取決于webpack的output配置，這里是src/main/resources/static)，它的內(nèi)容是這樣：

{
  "account/login.css": "account/login_style_f549ea0a.css",
  "account/login.js": "account/login_bundle_279af402.js"
}

接下來，創(chuàng)建一個幫助類ResourceFormatter(名稱自擬)：

public class ResourceFormatter{

    private JsonNode resourceMap;

    public ResourceFormatter(){
        ObjectMapper mapper = new ObjectMapper();
        Resource resource = new ClassPathResource("static/manifest.json");

        try {
            resourceMap = mapper.readValue(resource.getFile(), JsonNode.class);
        } catch (IOException e) {
            resourceMap = null;
        }
    }

    public String format(String originPath){

        if(resourceMap != null && resourceMap.has(originPath)){
            return "/" + resourceMap.get(originPath).asText();
        }

        return "/" + originPath;
    }
}

這個幫助類在初始化的時候就會讀取manifest.json，而在format()方法里則會利用清單信息對路徑進行轉(zhuǎn)換。

然后，把這個幫助類添加到模板引擎Thymeleaf內(nèi)，包含兩步。

第一步，創(chuàng)建一個Dialect類：

public class ResourceDialect extends AbstractDialect implements IExpressionEnhancingDialect {

    public ResourceDialect() {
        super();
    }

    @Override
    public String getPrefix() {
        return "resource";
    }

    @Override
    public Map getAdditionalExpressionObjects(IProcessingContext processingContext) {
        Map expressions = new HashMap<>();
        expressions.put("resourceFormatter", new ResourceFormatter());
        return expressions;
    }
}

可以看到ResourceFormatter在這里被實例化并添加。

第二步，在Spring應(yīng)用中注冊這個Dialect類：

@Configuration
public class ThymeleafConfig {
    @Bean
    public ResourceDialect resourceDialect() {
        return new ResourceDialect();
    }
}

到此，就可以在Thymeleaf視圖模板文件中使用了。修改視圖文件如下(只包含修改的部分)：

最后，啟動服務(wù)，訪問該頁，可以看到最終的輸出信息：

這就是我們要的帶hash的文件了。

此外，關(guān)于如何在Spring Boot中引入webpack，可以參考這個spring-boot-angular2-seed。

看完了一個傳統(tǒng)Java應(yīng)用的例子，再來看看現(xiàn)代的Node應(yīng)用。[Koa]Koa是簡潔的Node服務(wù)端框架，在它的基礎(chǔ)上引用帶hash的資源文件，也是同樣的思路。

首先，同樣是在webpack配置中加入webpack-manifest-plugin。

運行webpack構(gòu)建生成manifest.json，內(nèi)容大概會像這樣：

{
  "page1.css": "page1/style_0b5ab6ef.css",
  "page1.js": "page1/bundle_0f33bdc8.js",
  "page1potofu.jpg": "page1/potofu_26766d43.jpg"
}

然后，讀取這個json，為Koa(通過ctx.state)添加一個資源路徑轉(zhuǎn)換的幫助方法：

import manifest from "./public/manifest.json";

app.use(async(ctx, next) => {
    ctx.state.resourceFormat = (originPath) => {

        if (originPath in manifest) {
            return "/" + manifest[originPath];
        }

        return "/" + originPath;
    };
    await next();
});

最后，在視圖模板(這里的模板引擎是ejs)內(nèi)，引用所需的靜態(tài)資源：

">

到此，Koa的例子就完成了。

帶hash的文件是現(xiàn)在web啟用緩存來提升性能比較建議的形式，如果你也有類似的生產(chǎn)環(huán)境優(yōu)化的需要，很推薦你也試試。

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2017...）