我的应用程序中有几个配置文件，它们需要放在一个单独的捆绑包中，或者根本没有捆绑，但被复制到输出文件夹中，并以某种方式被主捆绑包读取。
我已经设法将我的文件打包到一个单独的配置包中，但问题是这些文件仍然打包到主包中，这实际上使我的配置包变得毫无用处
在@Chase的帮助下，我已经设法使配置包正常工作，但我还不高兴。接下来，我想知道如何使这些文件完全不捆绑，但在部署后仍然可用于主捆绑包。
有什么建议吗？
我的项目文件夹/文件结构(关键部分)：
- app
- js
- components
- [all of my components]
- config
- [my config files that I want to isolate]
- App.jsx
- index.jsx
- ...
- ...
我的webpack配置：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cwd = process.cwd()
const mode = 'production'
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
context: path.join(cwd, 'app'),
mode,
optimization: {
runtimeChunk: 'single',
minimize: false,
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
config: {
test: /[\/]app[\/]js[\/]config[\/]/,
minSize: 0
},
vendors: {
test: /[\/]node_modules[\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
},
}
},
},
},
entry: {
app: ["babel-polyfill", './js/index.jsx'],
silentRenew: ["./silent_renew/silent_renew.js"],
},
output: {
path: path.resolve('dist'),
filename: 'bundle_[name].js'
},
module: {
rules: [{
test: /.jsx?$/,
use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /.json$/,
use: ['json-loader'],
exclude: /node_modules/
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /.scss$/,
use: [
'style-loader',
'css-loader',
'scss-loader'
]
},
{
test: /.(png|jpg|jpeg|svg|gif)$/,
use: [
'file-loader'
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /.(pptx|zip)$/,
loader: "file-loader",
options: {
name: '[name].[ext]'
}
}]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './index.ejs',
excludeChunks: ["silentRenew"],
}),
new HtmlWebpackPlugin({
template: "./silent_renew/silent_renew.html",
chunks: ["silentRenew",],
filename: "silent_renew.html"
}),
new webpack.DefinePlugin({
CONSTANTS: {
PROD: false,
TEST: true,
DEV: false
}
}),
new webpack.IgnorePlugin(/^(fs|ipc|ignore)$/)
]
}
我希望我的配置文件进入配置包，这已经开始工作了。但我也需要它们不包括在主捆绑包中
如果我可以完全不捆绑配置文件，只将其复制到输出文件夹中，并由主(应用程序)捆绑包从中读取，那就更好了但第二种选择是独立的配置捆绑包
您需要根据条件对捆绑包进行分块。这是一个将node_modules拆分为"公共"bundle的示例，但您可以重写test属性以匹配您的目录条件。
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\/]node_modules[\/]/,
name: "common",
chunks: "all"
}
}
}