javascript - Webpack - 如何将依赖项捆绑到一个单独的文件中，该文件将包含在 "regular"输出流中

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 而实际应用程序将驻留在另一个文件中，我的应用程序.js。这种结构将允许我添加多个具有集中依赖文件的 React 应用程序。

my-app.js is built just fine - without the externals.

我缺少的是要从 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
    })
]