Webpack 如何使用 $translatePartialLoader 缓存半身角翻译？答案

【问题标题】：Webpack how to cache bust angular-translate with $translatePartialLoader?Webpack 如何使用 $translatePartialLoader 缓存半身角翻译？
【发布时间】：2019-04-16 13:06:24
【问题描述】：

"webpack": "^2.7.0"

我正在尝试向我们的翻译文件添加一个哈希，以便在部署时缓存 bust。我已经成功地提取了 json 并添加了一个哈希并将其输出到一个文件夹中，并且对这个世界很好。

但是，我未散列的 json 在构建后仍在原始文件夹下。我知道我们不需要为 json 添加加载器，因为它已经具有处理导入的方法，所以我的问题是如何清除已经处理的 json？

我的文件夹结构如下

src/
   app/
     module-name/
        /translations
         en.json
         fn.json
     module-name/
        /translations
         en.json
         fn.json
     //ect...

我使用 CopyWebpackPlugin 来获取 json 和 hash 是否有可能我错过了清除进程文件的选项？或者我可能以不正确的方式接近这个。

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const VersionFile = require('webpack-version-file');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const pkg = require('../package.json');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.(css|scss)$/,
        loaders: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?minimize!resolve-url-loader!sass-loader?sourceMap!postcss-loader'
        })
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader',
        options: {
          regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.json$/,
          name: '[name]-[hash].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate-loader',
          'babel-loader'
        ]
      },
      {
        test: /\.html$/,
        loaders: [
          'html-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.optimize.UglifyJsPlugin({
      output: {comments: false},
      compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer]
      }
    }),
    new webpack.HashedModuleIdsPlugin(),
    new CopyWebpackPlugin([{
      from: 'src/app/**/*.json',
      to: 'translations/[name]-[hash].[ext]'
    }]),
    new VersionFile({
      output: `${conf.paths.dist}/version.txt`,
      verbose: true
    })
  ],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  entry: {
    app: [`./${conf.path.src('app/app.module.js')}`],
    vendor: Object.keys(pkg.dependencies)
  },
  node: {
    fs: 'empty',
    /* eslint-disable camelcase */
    child_process: 'empty'
  }
};

或者为了简化问题，我如何向 json 文件添加哈希？下面的代码似乎没有做任何事情。

   {
       test: /\.json$/,
       loader: 'file-loader',
       options: {
         name: '[name]-[hash].[ext]'
       }
   }

编辑：

所以我的 json 加载器似乎没有提取翻译文件，因为它们是动态导入的，如下所示：

  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: 'app/{part}/translations/{lang}.json'
  });

你们会处理这样的案件吗？

【问题讨论】：

在 CopyWebpackPlugin 中，您可以指定路径 to: path.join(process.cwd(), conf.path.dist, 'translations/[name]-[hash].[ext]') 它将提供插件的绝对路径，而不是每个条目的当前相对路径。这将在 dist 目录的根目录下创建一个 translations 文件夹
是的，我可以使用哈希创建翻译文件夹，您的方法会删除旧条目吗？
@astenmies 感谢您的浏览
要删除旧条目，您只需删除 dist 文件夹并重新构建即可
不，所以复制的 JSON 仍然保留在原始路径中显示在屏幕截图中我可以执行类似 exec('-rm /dist/app') 之类的操作，但我希望如果不是很酷，它可以通过构建步骤来完成

标签： javascript json webpack

【解决方案1】：

您在这里尝试做的主要目标是在发布新版本时告诉浏览器它是一个新文件，我们可以相当容易地做到这一点，而无需强制 webpack 知道正在使用哪些文件。

在你的 webpack 配置中添加这个

const pkg = require('../package.json');
//...
new webpack.DefinePlugin({
  __VERSION__: JSON.stringify(pkg.version)
})

以及您添加翻译文件的位置，这允许浏览器知道新版本的发布位置并应该更新翻译文件。

$translateProvider.useLoader('$translatePartialLoader', {
   urlTemplate: `app/{part}/translations/{lang}.json?v=${__VERSION__}`
});

【讨论】：