为其他 Webpack bundle重新导出捆绑的 React

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

最小示例项目

下载

我的应用

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>

我的应用/应用.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!

最后，

我通过使用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' })]
};

相关内容

最新更新

热门标签：