reactjs - 从主包中隔离特定的配置文件
问题描述
我的应用程序中有几个配置文件需要单独的捆绑包或根本不捆绑但复制到输出文件夹并以某种方式由主捆绑包读取。
我已经设法将我的文件放入一个单独的配置包中,但问题是这些文件也仍然捆绑到主包中,实际上使我的配置包无用。
在@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 拆分为“通用”包的示例,但您可以重写该test
属性以匹配您的目录条件。
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "common",
chunks: "all"
}
}
}
推荐阅读
- python-3.x - python tk tkinter 多个画布在我的可滚动框架中买不起
- floating-point - 如何检测某些东西的大小是否因浮点精度缺陷而改变?
- prolog - 过滤 Prolog 规则结果
- brightway - Brightway ExcelImporter 无法进行新的生物圈交换
- javascript - 背景元素是静态的,当滚动框的内容时
- javascript - 我想为溢出的元素添加“显示更多”按钮,然后只有在点击更多鞋子后,我想显示新行
- python - 需要帮助我的 3 或 5 以及 3 和 5 的 python 倍数查找器
- python - 主要产生意外结果之外的Python多处理
- python - Python Seaborn:在两个类别图中设置相同的类别颜色
- c# - 对具有 15000 多个元素的数组进行排序时出现堆栈溢出异常