gpt4 book ai didi

git - 如何将一个 vendor block 文件(webpack)用于多个 react 项目

转载 作者:太空狗 更新时间:2023-10-29 14:43:09 27 4
gpt4 key购买 nike

我有不同的 gits 和不同的 react 应用程序。每个应用程序都应该使用相同的 vendor block 文件和外部包(React、ReactDOM ...)

项目设置:

Project 1 (git)
/dist/...
/src/...
webpack.config.js
Project 2 (git)
/dist/...
/src/...
webpack.config.js
Project N (git)
...

每个 webpack.config.js 都包含此配置但具有不同的库名称:

module.exports = {
entry: {
app: './src/App.ts',
vendor: ['react', 'react-dom', 'react-redux', 'redux', 'redux-thunk']
},
output: {
path: path.resolve(__dirname, "dist"),
filename: '<Name>.bundle.js',
library: "<Name>",
libraryTarget: "umd"
},
module: { /* ... */ },
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js'
})
]
}

问题:

Webpack 构建一个 vendor.bundle.js 尤其是当前的库/项目,而不是全局使用,是否有一个选项让 webpack 创建一个 vendor.bundle.js > 可以包含在一个页面上,在该页面上可以基于此文件加载两个应用程序:

示例:

<html>
<head>
<script src="/vendor.bundle.js"></script>
</head>
<body>
<script src="/app1.bundle.js"></script>
<script src="/app2.bundle.js"></script>
</body>
</html>

最佳答案

您可以使用 DllPlugin .您将需要一个额外的 Webpack 配置文件,假设 webpack.vendor.config.js 具有常见的依赖项,例如:'react'、'react-dom'、'react-redux ', 'redux', 'redux-thunk'.该 bundle 将与其余项目完全分离。

一旦你有了这个工作,它将创建一个可以从你的不同项目中使用的 manifest.json,所以不需要使用 webpack.optimize.CommonsChunkPlugin插件,但是 DllReferencePlugin相反。

通过这种方法,您不同项目的包文件会更小,这意味着构建和重建时间更短。

关于git - 如何将一个 vendor block 文件(webpack)用于多个 react 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45631299/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com