使Webpack将生成的哈希输出到配置文件中

Question

这是我们的项目使用的技术栈：

• Symfony 2.8 ^†
• 树枝1.24 ^†
• AngularJS 1.5 ^†
• Webpack 1.12 ^†

[我们有一个问题，我们的app.min.js文件已被缓存，并且当我们进行更改时需要一个新的app.min.js文件时，我们的客户通常会继续使用该缓存的文件，而不是加载新文件并最终生成错误并不得不请致电我们的支持台。

我已经研究过解决此问题的方法，即将文件内容的哈希值嵌入到HTTP请求中，然后让服务器使用重写规则来提供原始文件。我已经将[contenthash].添加到了webpack.config.js中的文件名中（见下文），但是当我运行Webpack时，它并不能替代[contenthash]，而是使用该确切名称创建文件。

[contenthash]

我想发生的是：

1. 输出文件仍称为

   module.exports = {
       output: {
           filename: 'app.min.[contenthash].js'
       }
   }

   和app.min.js
2. 生成的地图文件app.min.js.map链接到app.min.js.map
3. Webpack将哈希保存在配置文件中的某个位置

   app.min.6b1900549fed191ccbe8.js

4. 我更改了Twig模板，使其包含哈希，如下所示：

   app_min_js_hash: '6b1900549fed191ccbe8'
   

所以我有一些尚未解决的问题：

1. 如何使Webpack将哈希输出到配置文件
2. 如何让Webpack用哈希替换关键字
3. 如何使Webpack创建不带哈希的文件名

我已经知道如何解决重写和Twig的部分。

---

跟随链接的问题（<script src="/dist/js/app.min.{{ app_min_js_hash }}.js"></script> ）中的评论，我现在得到：

webpack.config.js

HtmlWebpackPlugin load bundle.[hash].js/css into base twig file

在Twig代码

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];

module.exports = {
    console: true,
    name: 'js',
    entry: ['./src/base.js'],
    output: {
        path: '../web/dist/js/',
        publicPath: '/dist/js/',
        filename: 'app.min.[hash].js'
    },
    devtool: "source-map",
    resolve : {
        root : [path.join(__dirname, "src/")]
    },
    sassLoader: {
        includePaths: './src/'
    },
    resolveLoader: {
        root: __dirname+'/node_modules/',
        modulesDirectories: [""]
    },
    jshint: {
      esversion: 6
    },
    // Initialize module
    preLoaders: [],
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'jshint-loader',
            }
        ],
        loaders: [{
            // JS LOADER
            // Reference: https://github.com/babel/babel-loader
            // Transpile .js files using babel-loader
            // Compiles ES6 and ES7 into ES5 code
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                presets: ['es2015']
            },
            exclude: /node_modules/
        }, {
            // ASSET LOADER
            // Reference: https://github.com/webpack/file-loader
            // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
            // Rename the file using the asset hash
            // Pass along the updated reference to your code
            // You can add here any file extension you want to get copied to your output
            test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
            loader: 'file'
        }, {
            // HTML LOADER
            // Reference: https://github.com/webpack/raw-loader
            // Allow loading html through js
            test: /\.html$/,
            loader: "ngtemplate?relativeTo=" + (path.resolve(__dirname, './src/')) + "/!html"
        }, {
            test: /\.scss$/,
            loaders: ["style", "css", "sass"]
        }],
        resolve: {
            // you can now require('file') instead of require('file.coffee')
            extensions: ['', '.js', '.json', '.coffee']
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            templateContent: function(params) {
                return `
    {% block jsAssets %}
      ${params.htmlWebpackPlugin.files.js.map(
                  file => `<script src="${file}"></script>`,
                )}
    {% endblock %}

    {% block cssAssets %}
      ${params.htmlWebpackPlugin.files.css.map(
                  file => `<link rel="stylesheet" type="text/css" href="${file}">`,
                )}
    {% endblock %}`;
            },
            filename: '../../resources/templates/assets.html.twig',
            inject: false,
            // // The following settings are optional and only used for
            // // demo purposes:
            // meta: {
            //     charset: { charset: 'utf-8' },
            //     viewport: 'width=device-width, initial-scale=1'
            // },
            // minify: false
        })
    ]
};

执行任何操作之前，必须use生成的Twig模板。

Twig：

{{ block("jsAssets", "assets.html.twig") }}

所以现在剩下的唯一问题是如何在每次生成哈希文件的同时保持输出文件名相同。否则，该目录将继续填充不同的哈希版本（不是很小）。只需要最新的文件。我们使用一步式部署，因此每次生成文件时都必须手动重命名该文件。

---

†我已经知道这个版本太旧了。短期内不会改变。

这是我们项目使用的技术堆栈：Symfony 2.8†Twig 1.24†AngularJS 1.5†Webpack 1.12†我们遇到了一个问题，即我们的app.min.js文件被缓存，并且在进行更改时需要一个新的...] >

Answer 1

在webpack 1中，它称为

{% use 'HTMLBundle:Layout:assets.html.twig' %}
...
{{ block("jsAssets", "assets.html.twig") }}
...

。您不需要发明轮子。

HTMLWebpack插件支持将哈希值注入到html（甚至php模板）中，即开即用