コンテンツハッシュ、ExtractTextPlugin、HtmlWebpackPlugin

Question

私はwebpackの設定から始めます。

const webpack = require('webpack'); 
const path = require('path'); 

/** 
* Environment 
*/ 
const nodeEnv = process.env.NODE_ENV || 'development'; 
const isProduction = nodeEnv === 'production'; 
const isDevelopment = !isProduction; 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const sourcePath = path.join(__dirname, 'assets'); 
const buildPath = path.join(__dirname, 'dist'); 

const extractSass = new ExtractTextPlugin({ 
    filename: '[name].[contenthash].css', 
    disable: isDevelopment 
}); 

/** 
* Plugins 
*/ 
const plugins = [ 
    new HtmlWebpackPlugin({ 
    template: path.join(sourcePath, 'index.html'), 
    }), 
    extractSass 
]; 

if (isProduction) { 
} else { 
    plugins.concat([ 
    new webpack.HotModuleReplacementPlugin(), 
    ]); 
} 

module.exports = { 
    entry: ['./assets/app.js', './assets/app.scss'], 
    devtool: isProduction ? 'eval' : 'source-map', 
    plugins: plugins, 
    module: { 
    rules: [{ 
     test: /\.scss$/, 
     use: extractSass.extract({ 
     use: [{ 
      loader: "css-loader" 
     }, { 
      loader: "sass-loader" 
     }], 
     // use style-loader in development 
     fallback: "style-loader" 
     }) 
    }] 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: buildPath 
    }, 
    devServer: { 
    contentBase: buildPath, 
    port: 9000 
    } 
}; 

これはwebpack devserverサーバーで実行するとすべて正常に動作しますが、実際の運用環境でどのように連携しているかを把握しようとしています。

sass-loaderのドキュメントのとおり、NODE_ENVがproductionに設定されている場合は、[name].[contenthash].cssというファイルを作成しています。私は完全性が大好きなので、コンテンツのハッシュに基づいてファイルを提供する考えが大好きです。

難しいのは、そのファイル名、そのコンテンツハッシュを私が作成しているindex.htmlテンプレートにどのように渡すことができるかを理解することです。<link>スタイルシートを使用できます。

• サーバ側のことですか？
• プロダクションのHTMLテンプレートにそのファイル名を渡す方法はありますか？
• 私はそれを手動で行うのか、それともスクリプト化するのが意図的なのでしょうか？

私は、これらの2つのコンポーネントが一緒になってパブリッシュ可能なビルドを作り出す方法を理解していません。 HtmlWebpackPluginは、出力ディレクトリに.htmlを生成しましたが、明らかに、そのスタイルをどこで見つけるかについての本来の理解はありません。

Answer 1

設定が正しいようです。

ファイル名を本番環境のHTMLテンプレートに渡す方法はありますか？

何が起こっすべきは、HtmlWebpackPluginは、自動的に（例えば生成されたCSSのバンドルがheadタグに注入され、その中に注入された生成されたバンドルを持っているあなたのbuildPathディレクトリ内の新しいindex.htmlファイルを作成しなければならないということです生成されたスクリプトバンドルはbodyタグの末尾にあります）

それ以外では、あなたのサイト/アプリケーションにアクセスした人にはdist/index.htmlを提供するだけです。だから答えは

サーバー側のことですか？

ははいです。

ご使用の構成の出力を見ることができるので、単にwebpackを実行することにより、DEVサーバなしでビルドをやってみ（DEVサーバがメモリに物事を構築しますので、あなたが実際にそれらを見ることはありません）