Link css filename with hash to index.html after the Extract Text Plugin

Question

I would like to ask how can I link the generated css files with a hash name to my index.html after I run the npm for my production:

"build-production": "webpack -p --progress --colors --config webpack.config.production.js"

This is the plugin in my webpack config that will generate the filename with hash since every time I build for production it generates a new hash filename. Is there a way that can automatically do it without manually editting the index.html?

plugins: [
    new ExtractTextPlugin("css/[name][contenthash].css")
]

score 1 · Answer 1 · answered Apr 17 '18 at 12:18

A possible solution for the case of generating html by server (Node.js) in runtime, mentioned by @Jonik above.

For development:

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('../../internals/webpack/webpack.dev.babel');

const compiler = webpack(webpackConfig);
const middleware = webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath,
  silent: true,
  stats: 'errors-only',
});

const fileSystem = middleware.fileSystem;
const encoding = 'utf-8';
const outputPath = compiler.outputPath;

For production:

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

const fileSystem = fs;
const encoding = { encoding: 'utf-8' };
const outputPath = path.resolve(process.cwd(), 'build');

And then:

let style = '';
fileSystem.readdirSync(outputPath).forEach((file) => {
  if (file.indexOf('.css') !== -1) {
    style += fileSystem.readFileSync(`${outputPath}/${file}`, encoding);
  }
});

The 'style' variable will contain your css bundled by ExtractTextPlugin.

score 0 · Accepted Answer · answered Feb 27 '17 at 05:37

0

html-webpack-plugin is the answer.

It can automatically add link and script tag to index.html for generated css and js file.

answered Feb 27 '17 at 05:37

Lin Du

88,126
95
281
483

It's not the answer if html generates by server in runtime. – Jonik Apr 04 '17 at 21:38
@Jonik and what is the answer then ? ;) – Cyril CHAPON Dec 12 '17 at 11:58
@Jonik, posted an answer based on your mention – HydraOrc Apr 17 '18 at 12:18

Link css filename with hash to index.html after the Extract Text Plugin

2 Answers2

Linked