为其他 Webpack 包重新导出捆绑的 React答案

【问题标题】：Re-export bundled React for other Webpack bundles为其他 Webpack 包重新导出捆绑的 React
【发布时间】：2019-08-24 03:22:32
【问题描述】：

在我的实际应用程序中，我有一个包含主要 Javascript 应用程序和多个依赖项的 Webpack 包。此外，我还有一些带有 Javascript 代码的可选 Webpack 包，它们使用与主 Webpack 包相同的依赖项。如何从我的主 Webpack 包中重新导出捆绑的依赖项以供其他包使用？

最小示例项目

Download

我的应用

myapp/index.html

<html>
<body>
    <div id="root"></div>
    <div id="optional"></div>
    <script src="./dist/bundle.js"></script>
    <script src="../mylib/dist/bundle.js"></script>
</body>
</html>

myapp/app.js

import * as React from "react";
import * as ReactDOM from "react-dom";

ReactDOM.render(React.createElement("h1", null, "Hello from App!"), document.getElementById("root"));
console.log("My application is loaded");

myapp/package.json

{
    "name": "myapp",
    "private": true,
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    },
    "devDependencies": {
        "webpack": "^14.29.6",
        "webpack-cli": "^3.3.0"
    }
}

myapp/webpack.config.js

module.exports = {
    entry: './app.js',
    output: { filename: 'bundle.js' }
};

我的可选库

mylib/lib.js

import * as React from "react";
import * as ReactDOM from "react-dom";

ReactDOM.render(React.createElement("h1", null, "Hello from Library!"), document.getElementById("optional"));
console.log("My optional library is loaded");

mylib/package.json

{
    "name": "mylib",
    "private": true,
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    },
    "devDependencies": {
        "webpack": "^14.29.6",
        "webpack-cli": "^3.3.0"
    }
}

mylib/webpack.config.js

module.exports = {
    entry: './lib.js',
    output: { filename: 'bundle.js' },
    externals: { 'react': 'React', 'react-dom': 'ReactDOM' }
};

当我打开myapp/index.html 时，我会从库中获得Uncaught ReferenceError: React is not defined。但是，该应用程序本身可以运行并打印Hello from App!

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

最后我通过使用Webpack的DllPlugin和DllReferencePlugin找到了解决方案。

我的更改：

myapp/index.html

<html>
<body>
    <div id="root"></div>
    <div id="optional"></div>
    <script src="./dist/vendor.js"></script>
    <script src="./dist/bundle.js"></script>
    <script src="../mylib/dist/bundle.js"></script>
</body>
</html>

mylib/webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = [
    {
        name: 'vendor',
        entry: ['react', 'react-dom'],
        output: { filename: 'vendor.js', library: 'vendor' },
        plugins: [new webpack.DllPlugin({ name: 'vendor', path: path.resolve(__dirname, 'dist/manifest.json') })]
    },
    {
        entry: './app.js',
        output: { filename: 'bundle.js' },
        dependencies: ['vendor'],
        plugins: [new webpack.DllReferencePlugin({ manifest: path.resolve(__dirname, 'dist/manifest.json') })]
    }
];

mylib/webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: './lib.js',
    output: { filename: 'bundle.js' },
    plugins: [new webpack.DllReferencePlugin({ manifest: path.resolve(__dirname, '../myapp/dist/manifest.json'), name: 'vendor' })]
};

【讨论】：