Webpackの構成を手書き--7.Webpackにhash値を付けて名前を付けます.

Webpack 4に基づく.x + npm6.5 + node v10.10.0+react+vscode環境.
プロジェクト名webpackDemo;
前のセクション:https://blog.csdn.net/fengsh998/article/details/88081807プラグインの参照.
このセクションでは、hashネーミングのメリットについて説明します.多くの場合、ブラウザがページにアクセスするときに多くのリソースファイルがローカルにキャッシュされます.キャッシュ時間が切れていない場合、新しいリソースファイルは要求されませんが、リソースを変更した場合、更新が遅れると問題が発生する場合があります.そのため、webpackはパッケージ化時にhash値を生成します.このhash値は、ソースファイルまたはリソースの変動に伴って変化し、ソースファイルが動かない場合はリソースが動かない.何も動かない場合、複数回コンパイルして生成したhashは同じです.これは心配しないでください.コンパイルするたびに異なるhashが発生するわけではない.

AdeMacBook-Pro-3:webpackdemo a$ npm run dev

> [email protected] dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist
ℹ ｢wdm｣: Hash: 3657098ad25ae41f7382
Version: webpack 4.29.6
Time: 1397ms
...

上からhash 3657098 ad 25 ae 41 f 7382が見られます
このhash値はどのように使いますか.Webpackでconfig.jsではhash値を使用して出力の名前を付ける必要がある場合.[hash]で読み込みます.

const path = require('path');
const htmlplugin = require('html-webpack-plugin')

module.exports = {
    ...
    output: {
        filename: 'bundle.[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    ...
}

これで修正するとhash値が付きます.
しかしhash値を加えた後.ソースコードのコンパイルを変更するたびに新しいhashファイルが生成され、そのdistには役に立たない古いファイルゴミがたくさんあります.毎回手動で削除します.煩わしい.この場合、clean-webpack-pluginをインストールできます.https://www.npmjs.com/package/clean-webpack-plugin 

const path = require('path');
const htmlplugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

let pathsToClean = [
    'dist/*.*',
    'build'
]

let cleanOptions = {
    root: __dirname,
    verbose: true,
    dry: false
}

module.exports = {
    ...
    output: {
        filename: 'bundle.[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(pathsToClean, cleanOptions),
        new htmlplugin({
            title: 'Html    Demo',
            template: path.join(__dirname, 'public', 'index.html')
        })
    ],
    ...
}

これでハッシュは基本的な使用が完了したと言えるでしょう.