Question

我想问一下，在为生产运行npm后，如何将生成的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

在运行时由服务器（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。

Answer 2

html-webpack-plugin就是答案。

它可以自动将<img data-ng-src="{{ profileimg }}" data-ng-class="{'picked': profile.picked}"></img>和link标记添加到script以生成css和js文件。

在Extract Text Plugin之后将带有hash的css文件名链接到index.html

2 个答案: