У меня есть настройка Webpack, чтобы разделить мои куски между распространенными поставщиками и различными точками входа.Пока все отлично работает, за исключением того, что у меня есть одна проблема, которую я не могу решить, это переименование определенного чанка поставщика, который содержит общие модули между моими точками входа.и избыточный.Все остальные модули общего узла выводятся в файл с именем, похожим на этот: vendors~client.dashboard~client.login.bundle.js
.Тем не менее, я хотел бы переименовать этот чанк в vendors~common.js
, потому что по мере того, как мои точки входа растут, я не хочу большого имени файла.
Я вставил свою конфигурацию веб-пакета ниже.Как видите, я определил свои группы кеша, а все остальное в порядке.Я просто хочу знать, как переименовать тот оставшийся кусок, который автоматически генерируется для остальной части модуля общего узла.
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";
const webpack = require("webpack");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
name: "client",
entry: {
"client": ['@babel/polyfill', './src/exposers/client.js'],
"client.login": './src/exposers/client.login.js',
"client.dashboard": './src/exposers/client.dashboard.js'
},
output: {
path: path.resolve(__dirname, './'),
filename: 'assets/bundles/client/js/[name].bundle.js',
},
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
core: {
test: /[\\/]node_modules[\\/](core-js|regenerator-runtime|scheduler|object-assign|@babel)[\\/]/,
name: "vendors~core",
chunks: "all",
enforce: true
},
react: {
test: /[\\/]node_modules[\\/](react|react-dom|prop-types)[\\/]/,
name: "vendors~react",
chunks: "all",
enforce: true
},
redux: {
test: /[\\/]node_modules[\\/](react-redux|redux)[\\/]/,
name: "vendors~redux",
chunks: "all",
enforce: true
}
}
}
},
module: {
rules: [{
test: /\.jsx|js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
}, {
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: path.resolve(__dirname, './')
}
},
"css-loader"
]
},
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [{
loader: 'file-loader',
options: {
name: '/[path][name].[ext]'
}
}]
}
],
},
plugins: [
new BundleAnalyzerPlugin(),
new MiniCssExtractPlugin({
filename: "assets/bundles/client/css/[name].bundle.css"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
mode: "development",
resolve: {
extensions: ['.js', '.jsx'],
alias: {
"assets": path.resolve(__dirname, 'assets/'),
"config": path.resolve(__dirname, 'config/'),
"src": path.resolve(__dirname, 'src/'),
"helpers": path.resolve(__dirname, 'src/helpers/'),
"base": path.resolve(__dirname, 'src/components/base/'),
"forms": path.resolve(__dirname, 'src/components/forms/'),
"pages": path.resolve(__dirname, 'src/components/pages/'),
"sections": path.resolve(__dirname, 'src/components/sections/'),
"widgets": path.resolve(__dirname, 'src/components/widgets/'),
}
}
};