Content Hashes, ExtractTextPlugin and HtmlWebpackPlugin
I think I'll start with my webpack config.
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
}
};
This all works great when running on a webpack dev server, but I'm trying to figure out how it fits together in a production environment.
As you can see, according to the sass-loader documentation, I create a file named [name].[contenthash].css
if the parameter is NODE_ENV
set to production
. I like the idea of serving files based on a hash of the content because I love integrity.
The difficulty I'm running into is figuring out how I can pass this filename, this hash of content, into the index.html template I'm creating so that I can have <link>
a stylesheet.
- Is this a server thing?
- Is there a way to pass this filename into the HTML template to production?
- Is it intentional to do this manually or by script?
I just don't understand how these two components came together to create a publish assembly. HtmlWebpackPlugin
created .html in the output directory, but obviously it doesn't have an innate understanding of where to find it.
source to share
Your configuration appears to be correct.
Is there a way to pass this filename to the HTML template when it is created?
What should be happening is that HtmlWebpackPlugin
should create a new index.html
file in your directory buildPath
where the generated packages are automatically inserted into it, for example, the generated CSS set will be injected into the tag head
and the generated script packages at the bottom of the tag body
)
Also, it's just a matter of service to dist/index.html
those who visit your site / application. So the answer to
Is this a server thing?
- Yes.
Try building without a dev server, just running webpack
so you can see the output of your config (the dev server builds things in memory, so you don't actually see them)
source to share