javascript - 内容哈希、ExtractTextPlugin 和 HtmlWebpackPlugin

Question

我想我将从我的 webpack 配置开始。

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-loader 文档，我正在创建一个名为 [name].[contenthash].css 的文件如果NODE_ENV设置为 production .我喜欢基于内容哈希提供文件的想法，因为我喜欢完整性。

我遇到的困难是理解如何将文件名和内容哈希传递到我正在创建的 index.html 模板中，这样我就可以 <link>样式表。

• 它是服务器端的东西吗？
• 有没有办法将该文件名传递到 HTML 模板中生产？
• 我是有意手动执行还是编写脚本？

我只是不明白这两个组件是如何组合在一起来生成可发布的版本的。 HtmlWebpackPlugin在输出目录中生成了一个 .html，但显然它对在哪里可以找到它的样式没有天生的理解。

Answer 1

您的配置似乎是正确的。

Is there any way to pass that file name into the HTML template on production?

应该发生的是 HtmlWebpackPlugin 应该在您的 buildPath 目录中创建一个新的 index.html 文件，该文件具有生成的bundles 自动注入(inject)其中(例如生成的 CSS bundle 将被注入(inject)到 head 标签中，生成的脚本 bundle 将注入(inject)到 body 标签的底部)

除此之外，只需将 dist/index.html 提供给访问您网站/应用程序的任何人即可。所以答案

Is it a server side thing?

是的。

尝试在没有开发服务器的情况下进行构建，只需运行 webpack，这样您就可以看到配置的输出(开发服务器在内存中构建东西，所以您实际上看不到他们)