內容散列，ExtractTextPlugin和HtmlWebpackPlugin

我想我會用我的WebPack配置開始。內容散列，ExtractTextPlugin和HtmlWebpackPlugin

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開發服務器上運行時，這一切都正常，但我試圖弄清楚這是如何適應生產環境。

正如你所看到的，因爲每SASS裝載機的文檔，我創建一個如果NODE_ENV設置爲production稱爲[name].[contenthash].css文件。我喜歡基於內容哈希來提供文件的想法，因爲我喜歡誠信。

我遇到的困難是瞭解如何通過該文件名，將該內容散列到我創建的index.html模板中，以便我可以將<link>樣式表。

它是一個服務器端的事情嗎？
有什麼方法來傳遞文件名到HTML模板上生產？
是不是故意的，我做手工或腳本吧？

我只是不明白這兩個組件是如何聚集在一起產生可發佈構建。 HtmlWebpackPlugin在輸出目錄中產生了一個.html文件，但顯然它沒有天生的理解在哪裏找到它的樣式。

來源

2017-03-21 Richard Vanbergen

你的配置似乎是正確的。

有什麼辦法將該文件名傳遞到生產中的HTML模板上嗎？

應該怎樣發生的是，HtmlWebpackPlugin應該創建一個新的index.html文件在您buildPath目錄，裏面有生成的捆綁在它自動注入（例如生成CSS束將在head標籤注入和在body標籤底部生成的腳本包）

除此之外，它只是爲dist/index.html服務誰訪問您的網站/應用程序的問題。所以答案

它是一個服務器端的事情嗎？

是肯定的。

嘗試做一個構建，而不開發服務器，只需運行webpack，所以你可以看到你的配置的輸出（開發服務器在內存中建立的東西，所以你實際上並沒有看到它們）

來源

2017-03-21 23:21:49

我這將不得不回到你身邊。抱歉，久等了。 –

內容散列，ExtractTextPlugin和HtmlWebpackPlugin

回答

相關問題