Question

我有一个有效的webpack配置文件，它捆绑了我的React应用程序。我的配置使用webpack.ProvidePlugin和externals选项，如下所示：

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter'
},
plugins: [
    new webpack.ProvidePlugin({
        React: 'react',
        ReactDOM: 'react-dom',
        ReactRouter: 'react-router'
    })]

我想要实现的是能够在一个文件中加载React依赖项，例如 react-with-deps.js ，实际应用程序将驻留在另一个文件中， MY-app.js 即可。这种结构允许我添加多个反应应用程序，并使用集中的依赖文件。

my-app.js 构建得很好 - 没有外部。

我缺少的是从externals列表构建的 react-with-deps.js 文件。我试图将它作为output列表的一部分包含在内，但它没有用。

将获得如何实现这一目标的任何线索！

Answer 1

externals是您明确说的不包含在您的Webpack构建中的模块，因此您可以从其他地方加载它们（<script>标记等）。你不能从他们那里建立一个文件，这会打败整个点！

我认为你要找的是CommonsChunkPlugin：

entry: {
   "my-app": "your app's entry file",
   "react-with-deps": [
       "react",
       "react-dom",
       "react-router"
   ]
},
output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "react-with-deps",
        minChunks: Infinity
    })
]

Webpack - 如何将依赖项捆绑到一个单独的文件中，该文件将包含在“常规”输出流中

1 个答案: