Question

在我的实际应用程序中，我有一个Webpack捆绑包，其中包含主Javascript应用程序和多个依赖项。另外，我有一些带有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!

Answer 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' })]
};

重新导出捆绑的React以用于其他Webpack捆绑

1 个答案: