使用 Webpack 重建 Production Bundle 时显示我的网站的旧版本

Question

我注意到，当我使用 webpack 重建我的 node.js 应用程序的生产包时，浏览器中的站点会恢复为旧版本（稍后 300 多个 git 提交）。我使用 pm2 在我的 VPS 上运行我的网站。

如何在新的生产构建完成之前保持最旧的版本有效？

这是我的 webpack 设置：

    const { resolve } = require('path');
    const webpack = require('webpack');
    const CompressionPlugin = require('compression-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

    const cssOutputLocation = process.env.NODE_ENV === 'production' ?
      'public/stylesheets/style-prod.css' :
      'stylesheets/style.css';

    const jsProdOutput = {
      filename: 'public/javascripts/build-prod.js',
      path: resolve(__dirname),
      publicPath: '/',
    };

    const jsDevOutput = {
      filename: 'javascripts/build.js',
      path: '/',
      publicPath: '/',
    };

    const jsOutputLocation = process.env.NODE_ENV === 'production' ? jsProdOutput : jsDevOutput;

    module.exports = {
      context: resolve(__dirname, 'src'),
      entry: [
        './index.jsx',
      ],
      output: jsOutputLocation,
      resolve: {
        extensions: ['.js', '.jsx'],
      },
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components|public\/)/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'es2017'],
            },
          },
          {
            test: /\.js?$/,
            exclude: /(node_modules|bower_components|public\/)/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'es2017'],
            },
          },
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader',
            }),
          },
          {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
              use: [
                {
                  loader: 'css-loader',
                },
                {
                  loader: 'sass-loader',
                },
              ],
              fallback: 'style-loader',
            }),
          },
        ],
      },
      plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin(cssOutputLocation),
        new BundleAnalyzerPlugin(),
        new webpack.ContextReplacementPlugin(/^\.\/locale$/, (context) => {
          if (!/\/moment\//.test(context.context)) { return; }
          // context needs to be modified in place
          Object.assign(context, {
            // include only CJK
            regExp: /^\.\/(nl|en-gb)/,
            // point to the locale data folder relative to moment's src/lib/locale
            request: '../../locale',
          });
        }),
      ],
    };

    if (process.env.NODE_ENV === 'production') {
      module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
          screw_ie8: true,
          conditionals: true,
          unused: true,
          comparisons: true,
          sequences: true,
          dead_code: true,
          evaluate: true,
          if_return: true,
          join_vars: true,
        },
        output: {
          comments: false,
        },
      }));
      module.exports.plugins.push(new webpack.HashedModuleIdsPlugin());
      module.exports.plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
      module.exports.plugins.push(
        new webpack.DefinePlugin(
          { 'process.env.NODE_ENV': JSON.stringify('production') },
        ),
      );
      module.exports.plugins.push(
        new CompressionPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
          threshold: 10240,
          minRatio: 0.8,
        }),
      );
    }

    if (process.env.NODE_ENV !== 'production') {
      module.exports.entry.unshift(
        'react-hot-loader/patch',
        'react-hot-loader/babel',
        'webpack-hot-middleware/client',
      );
      module.exports.plugins.unshift(new webpack.HotModuleReplacementPlugin());
    }

Answer 1

您可以在输出配置的 filename 属性中使用 hash 占位符。

const jsProdOutput = {
  filename: 'public/javascripts/build-prod-[hash].js',
  path: resolve(__dirname),
  publicPath: '/',
};

这样，您生成的文件将在每个构建中都是唯一的，并且不会被覆盖。