我正在尝试将代码拆分引入我的项目,但是我无法使其正常工作。我得到的错误是:
我有一个monorepo设置,其中的lib/
工作区包含我正在创建的整个React库,以及一个demo/
工作区,该工作区仅导入react模块并显示它以用于测试。
我认为问题在于这两者如何相互作用以及输出块的位置或其他内容,但无法弄清楚。
我的文件是这样的:
var path = require('path')
module.exports = {
entry: {
maps: './src/index.js'
},
output: {
path: __dirname + '/dist',
filename: 'index.js',
library: 'Map',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.[s]?css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
}
}
},
'sass-loader'
],
include: /\.module\.[s]?css$/
},
{
test: /\.[s]?css$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: /\.module\.[s]?css$/
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
rootMode: 'upward'
}
}
},
{
test: /\.svg$/,
use: ['@svgr/webpack']
},
{
test: /\.(jpe?g|png)$/i,
loader: 'file-loader?name=/public/icons/[name].[ext]'
}
]
},
resolve: {
modules: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, '../node_modules')
],
extensions: ['.js', '.jsx']
},
externals: {
// Use external version of React
react: 'react',
'react-dom': 'react-dom'
},
// NOTE: @claus added options to fix files not being watched
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
}
lib/ // In this project we try to use code splitting using React.Lazy()
package.json
webpack.config.js
demo/ // Includes the lib module for testing purposes
package.json
babel.config.js
package.json
{
"name": "demo",
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"maps": "link:../map/"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
}
}
尝试加载不可用的捆绑程序块时引发该错误。
据我了解,代码拆分用于应用程序,而不是库。
对库使用代码拆分意味着您将必须交付多个块,dist
而不是像设置那样传输单个文件
path: __dirname + '/dist',
filename: 'index.js',
我不确定代码拆分是否适用于库-否则会有什么好处。
使用代码分割在demo
一个需要从碎片手段lib
将演示的块捆绑在一起。你将不得不使用React.lazy
的demo
,而不是lib
和建设时demo
,各React.lazy
将产生新的组合。demo
有权访问所有lib
源文件(或单个文件dist),并且只有所需的内容才会在生成的应用程序中结束。
我猜你用React.lazy
在lib
这种混合的东西了。
我希望这有帮助!
额外的问题/信息:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句