内容哈希、ExtractTextPlugin 和 HtmlWebpackPlugin答案

【问题标题】：Content Hashes, ExtractTextPlugin and HtmlWebpackPlugin内容哈希、ExtractTextPlugin 和 HtmlWebpackPlugin
【发布时间】：2017-08-13 19:52:25
【问题描述】：

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

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

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

我只是不明白这两个组件如何结合在一起生成可发布的构建。 HtmlWebpackPlugin 在输出目录中生成了一个 .html，但显然它不知道在哪里可以找到它的样式。

【问题讨论】：

标签： javascript sass webpack frontend webpack-2

【解决方案1】：

您的配置似乎正确。

有没有办法将该文件名传递到生产中的 HTML 模板中？

应该发生的是HtmlWebpackPlugin 应该在您的buildPath 目录中创建一个新的index.html 文件，其中自动注入生成的包（例如，生成的 CSS 包将被注入head 标签和生成的脚本捆绑在body 标签的底部）

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

这是服务器端的事情吗？

是的。

尝试在没有开发服务器的情况下进行构建，只需运行webpack，这样您就可以看到配置的输出（开发服务器在内存中构建内容，因此您实际上看不到它们）

【讨论】：

我必须就此事回复您。抱歉让您久等了。