[英]How to split chunks when authoring libraries with webpack 4?
我正在嘗試將自定義反應組件發布到私有存儲庫。
我使用react-loadable
按需加載子組件。 在本地運行時,一切正常。 index.js 文件在需要時正確地向 chunk.js 文件發出請求。 但是,當從另一個項目發布和使用時,該組件在嘗試請求子組件塊時會遇到 404 錯誤。 在編寫庫時,我應該如何拆分塊並按需加載它們? 這甚至可能還是我想錯了?
這是我的 webpack.config.js,以防它是一個簡單的配置問題:
module.exports = () => ({
context: __dirname,
mode: 'development',
entry: './src/index.jsx',
output: {
path: path.join(__dirname, './dist'),
filename: "index.js",
library: "reactcombobox",
libraryTarget: "umd",
publicPath: path.join(__dirname, './dist'),
umdNamedDefine: true
},
plugins: [
new webpack.LoaderOptionsPlugin({ options: { context: __dirname}}),
new CleanWebpackPlugin([path.join(__dirname, './dist')], {verbose: true, allowExternal: true})
],
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
"targets": {
"browsers": ["last 4 Chrome versions"]
}
}],
'@babel/preset-react'
],
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-syntax-dynamic-import'
]
}
}
},
{
test: /.css$/,
use: ["style-loader","css-loader"]
}
]
},
externals: {
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
}
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
});
如果您的組件沒有親戚請拆分到更多文件並使用 export {a1,a2}; 不要使用可加載的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.