AngularJS + webpack如何对模板HTML进行哈希处理

Question

我已经将我们的AngularJS应用程序迁移到使用webpack - 之前是使用gulp。在gulp版本中，我使用了rev插件来重新加载所有文件（css，js和html），但是在webpack模式下，我找不到在html模板中添加哈希值的方法 - 这会导致问题，因为浏览器提供旧的html文件。如何解决？下面是webpack配置文件：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const RemoteServer = process.env.REMOTE_SERVER;
const appEnv = process.env.NODE_ENV || 'development';
const isProduction = appEnv === 'production';

const patterns = require('../server/src/main/resources/regex.json');

const appPath = path.join(__dirname, 'app');
const buildPath = path.join(__dirname, 'artifacts');

const config = {
    entry: [path.join(appPath, 'index.js')],

    output: {
        path: buildPath,
        filename: '[name].[hash].js',
        chunkFilename: '[name].[hash].js'
    },

resolve: {
    modules: ['node_modules', appPath],
    alias: {
        'ui-select-css': path.resolve('./node_modules/ui-select/dist/select.css'),
        fonts: path.resolve(__dirname, 'assets/fonts')
    }
},

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: {
                emitWarning: true,
                quiet: true
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'resolve-url-loader'
            ]
        },
        {
            test: /\.less$/,
            use: [{
                loader: 'style-loader'
            }, {
                loader: 'css-loader', options: {
                    url: false,
                    sourceMap: true
                }
            }, {
                loader: 'less-loader', options: {
                    relativeUrls: false,
                    sourceMap: true
                }
            }]
        },
        {
            test: /\.(jpe?g|png|gif)(\?.*)?$/i,
            use: [{
                loader: 'file-loader',
                options: {name: '[path][name].[hash].[ext]'}
            }]
        },
        {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/'
                }
            }

        },
        {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {limit: 10000, mimetype: 'application/octet-stream'}
                }
            ]
        },
        {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                {
                    loader: 'file-loader'
                }
            ]
        },
        {
            test: /\.svg$/i,
            loader: 'raw-loader'
        },
        {
            test: require.resolve('angular'),
            use: [
                {loader: 'expose-loader', options: 'angular'},
            ]
        },
        {
            test: require.resolve('jquery'),
            use: [
                {loader: 'expose-loader', options: '$'},
                {loader: 'expose-loader', options: 'jQuery'},
            ]
        },
        {
            test: require.resolve('lodash'),
            use: [
                {loader: 'expose-loader', options: '_'},
            ]
        },
        {
            test: require.resolve('moment'),
            use: [
                {loader: 'expose-loader', options: 'moment'},
            ]
        },
        {
            test: /\.html$/,
            use: [{
                loader: 'raw-loader',
                options: {name: '[path][name].[hash].[ext]'}
            }]
        }
    ]
},

plugins: [
    new HtmlWebpackPlugin({
        template: path.join(appPath, 'index.html')
    }),

    new webpack.DefinePlugin({
        INJECT_REGEX_HERE: JSON.stringify(patterns)
    }),

    new CopyWebpackPlugin([
        {from: 'app/images', to: 'assets/images'},
        {from: 'app/fonts', to: 'assets/fonts'},
        {from: 'app/templates', to: 'assets/templates'},
        {from: 'app/silent-callback.html', to: 'silent-callback.html'},
        {from: 'node_modules/font-awesome/css', to: 'assets/font-awesome/css'},
        {from: 'node_modules/font-awesome/fonts', to: 'assets/font-awesome/fonts'},
        {from: 'node_modules/angular-ui-grid/fonts', to: 'assets/fonts'},
        {from: 'node_modules/d3/d3.min.js', to: 'assets/d3'}
    ]),

    new MiniCssExtractPlugin({
        filename: '[name].[hash].css',
        chunkFilename: '[id].[hash].css'
    }),

    new OpenBrowserPlugin({url: 'http://localhost:1337'})
],

devtool: isProduction ? 'source-map' : 'inline-source-map',

devServer: {
    port: 1337
},

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                chunks: 'all'
            }
        }
    }
}

};

if (RemoteServer) {
     console.log('running with remote server', RemoteServer);
     config.devServer.proxy = {
    '/occm/*': 'http://' + RemoteServer
    };
 }

if (isProduction) {
config.plugins.push(
    new CleanWebpackPlugin(buildPath)
    );
}

module.exports = config;

- li-raz

---

你找到解决方案了吗？我也在寻找同样的东西。 - Oskar Persson

作为一种选择，您可以将所有HTML模板内联到JS中。这就是我们在应用程序中所做的。 - Petr Averyanov

@PetrAveryanov，你如何处理ngIncludes（如果有的话）？ - Oskar Persson

我们只有“文件本地”的ng-include，没有问题。（我们直接将全局模板放入templateCache中） - Petr Averyanov

Answer 1

使用Webpack的主要好处之一是减少浏览器为呈现您的应用程序而执行的请求数量，并使您的应用程序启动更快。为实现这一点，它将相关资源组合在一起形成“块”，这些块一起在一个请求中加载。在此情况下，单独加载不需要特定原因的所需单个文件（如HTML模板）可能被视为反模式。

最佳实践是将所有相关JS、HTML和CSS代码组合在一个大包中，一次性加载，有时（对于较大的应用程序）还可以有第二个“供应商”包，用于从node_modules中获取代码，加快开发速度，因为这个块不会经常改变。

替代方案：

因此，在您的情况下，如果没有保持分离的具体原因（您没有提到），我建议将HTML与控制代码一起作为一个块提供，而不是单独加载HTML文件。

一个很好且简单的起点是构建两个块。用以下代码替换整个优化块：

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all'
      }
    }
  }
},

这将构建两个块：一个主块用于所有JS和HTML文件，另一个块专门用于来自node_modules文件夹的所有内容。

这样，您就不必再担心HTML文件的浏览器缓存问题，因为它们已经构建在主块中，并且作为一个好处，您的应用程序将启动更快。

- hoeni

---

基本点是，webpack会自动处理这个问题，你不需要自己构建哈希值。 - Tim Jones

Answer 2

我在几年前做过类似的迁移，但我不需要那种类型的解决方案。我的目标是将每个组件封装为模块，然后尽可能进行惰性加载。

// webpack config
{
  test: /\.html$/,
  use: ['html-loader'],
},

然后在每个组件中，我只需要像这样的样式和模板：

require('./_proposal-page.scss');

(function() {
  'use strict';
  angular.module('component.myComponent', []).component('myComponent', {
    template: require('./proposal-page.html'),
    controller: MyController,
  });

  /** @ngInject */
  function MyController($log) {
    const $ctrl = this;
    $ctrl.$onInit = function() {
      $log.log('$onInit myComponent');
    }
  }
})();
if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.exports === exports) {
  module.exports = 'component.myComponent';
}

Webpack会检测每个 .html 文件中的require语句并将其导出为模块，这一过程非常顺畅。

- aUXcoder