Я провел много исследований, не нашел ничего полезного для этой проблемы. Итак, у меня возникла идея создать два отдельных файла конфигурации webpack для моих выводов ltr и rtl моего проекта. Поэтому я изменил свой webpack.prod.js файл следующим образом:
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
main: './src/js/main.js' // ---> the only entry we have is main
},
output: {
path: path.join(__dirname, '../build'),
filename: '[name].[chunkhash:8].bundle.js',
chunkFilename: '[name].[chunkhash:8].chunk.js',
},
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.(png|svg|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/img',
esModule: false,
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/font',
},
},
],
},
{
test: /\.html$/i,
use: {
loader: 'html-loader',
options: {
attributes: {
list: [
{
tag: 'img',
attribute: 'src',
type: 'src',
},
{
tag: 'img',
attribute: 'srcset',
type: 'srcset',
},
{
tag: 'img',
attribute: 'data-src',
type: 'src',
},
{
tag: 'img',
attribute: 'data-srcset',
type: 'srcset',
},
],
},
},
},
},
],
},
optimization: {
minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
chunks: 'all',
},
runtimeChunk: {
name: 'runtime',
},
},
plugins: [
// load jQuery
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].bundle.css',
chunkFilename: '[name].[chunkhash:8].chunk.css',
}),
new HtmlWebpackPlugin({
chunks: ['main'],
template: 'src/i18n/index.html',
filename: 'index.html',
}),
// new HtmlWebpackPlugin({
// chunks: ['main-rtl'],
// template: 'src/i18n/fa/index.html', ----> this part removed too
// filename: 'fa/index.html',
// }),
],
};
Затем я создал другой файл конфигурации webpack с именем webpack.prod.rtl.js для вывода rtl моего проекта и изменил outputPath моего проекта file-loader а также я изменил filename в своем HtmlWebpackPlugin, как вы можете видеть ниже:
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
'main-rtl': './src/js/main-rtl.js', // main-rtl instead of main
},
output: {
path: path.join(__dirname, '../build/fa'),
filename: '[name].[chunkhash:8].bundle.js',
chunkFilename: '[name].[chunkhash:8].chunk.js',
},
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.(png|svg|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../assets/img',
esModule: false,
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../assets/font',
},
},
],
},
{
test: /\.html$/i,
use: {
loader: 'html-loader',
options: {
attributes: {
list: [
{
tag: 'img',
attribute: 'src',
type: 'src',
},
{
tag: 'img',
attribute: 'srcset',
type: 'srcset',
},
{
tag: 'img',
attribute: 'data-src',
type: 'src',
},
{
tag: 'img',
attribute: 'data-srcset',
type: 'srcset',
},
],
},
},
},
},
],
},
optimization: {
minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
chunks: 'all',
},
runtimeChunk: {
name: 'runtime',
},
},
plugins: [
// load jQuery
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].bundle.css',
chunkFilename: '[name].[chunkhash:8].chunk.css',
}),
new HtmlWebpackPlugin({
chunks: ['main-rtl'],
template: 'src/i18n/fa/index.html',
filename: 'index.html', // ---> changed from fa/index.html to index.html
}),
],
};
Плюс, у меня установлен пакет npm с именем npm-run-all для запуска некоторых команд npm cli в параллельно. Таким образом, когда мне нужны версии ltr и rtl моего проекта одновременно, я могу собрать их обе с помощью этих команд в script section моего package.json файла:
"scripts": {
// other scripts,
"build-ltr": "webpack --config=config/webpack.prod.js",
"build-rtl": "webpack --config=config/webpack.prod.rtl.js",
"build": "npm-run-all --parallel build-ltr build-rtl"
},
Например, после запуска npm run build он дает мне и ltr, и rtl версии моего проекта в предыдущей структуре папок, о которой я упоминал в этом вопросе, но с правильными путями sr c изображения.
Итак, я решил поделиться решением. Определенно, есть и другие решения, но это то, что я придумал, чтобы решить свою проблему на данный момент.
Надеюсь, это будет полезно для других.