Link css 文件名，在提取文本插件后哈希为 index.html

Question

我想问一下如何在运行我的产品的 npm 之后 link 生成的 css 文件的哈希名称到我的 index.html：

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

这是我的 webpack 配置中的插件，它将生成带有哈希的文件名，因为每次我为生产构建时它都会生成一个新的哈希文件名。有没有一种方法可以自动完成而无需手动编辑 index.html?

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

Answer 1

html-webpack-plugin就是答案。

生成的css和js文件可以自动给index.html添加link和script标签。

Answer 2

服务器（Node.js）在运行时生成html的情况的可能解决方案，上面@Jonik提到。

用于开发：

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;

用于生产：

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

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

然后：

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

'style' 变量将包含由 ExtractTextPlugin 捆绑的 css。

Link css 文件名，在提取文本插件后哈希为 index.html

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

webpack

extract-text-plugin