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

我遇到的困难是理解如何将该文件名和内容哈希传递到我正在创建的 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 文件，其中自动注入生成的包（例如生成的 CSS 包将被注入到 head 标签中，生成的脚本包将被注入到 body 标签的底部）

除此之外，只需将 dist/index.html 提供给访问您 site/app 的任何人即可。所以

的答案

Is it a server side thing?

是。

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

内容哈希、ExtractTextPlugin 和 HtmlWebpackPlugin

Content Hashes, ExtractTextPlugin and HtmlWebpackPlugin

javascript

frontend

sass

webpack

webpack-2