javascript - Webpack 如何使用 $translatePartialLoader 缓存半身角翻译?
问题描述
"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 和散列是否有可能我错过了清除进程文件的选项?或者也许我正在以不正确的方式接近这个。
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'
});
你会处理这样的案件吗?
解决方案
您在这里尝试做的主要目标是在发布新版本时告诉浏览器它是一个新文件,我们可以相当容易地做到这一点,而无需强制 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__}`
});
推荐阅读
- google-bigquery - Big Query 中的 Union Firebase Analytics 数据
- bash - While 循环 ssh 连接
- travis-ci - 使用 Travis CI API 获取存储库的作业日志文件
- azure-logic-apps - 无法查询表存储中的 DateTime 列
- java - 如何仅将 Spring Boot 记录器设置为计划任务?
- wordpress - 如何在产品和自定义帖子类型下拉 CF7 wordpress 插件中设置第一个选项?
- kentico - 使用管理 API“请求正文大于 maxBodyLength 限制”在 kentico 中上传 25mb 的视频时出现问题
- python - 在 python 中读取大的 zip 文件(不是里面的文件)
- javascript - 为什么 html 中的虚拟脚本块修复 css 动画?
- python - Python 控制台中没有显示