Question

我最近开始使用Webpack打包我的所有依赖项，我不得不说，我很困惑如何在多个模块之间创建一个工作的依赖图。让我们来定义问题：

页面A使用脚本SA。
SA使用供应商依赖关系VA。
VA使用polyfills P。
页面B使用供应商依赖性VB。
VB使用polyfills P。
VA和VB中有常见的模块。

所以依赖图看起来像这样：

P <- VA <- SA <- A
   \ VB <- B

由于VA和VB有共同的模块，我想将它们提取到常见的供应商依赖VC：

P <- VC <- VA <- SA <- A
         \ VB <- B

因此，在花了几个小时试图计算Webpack如何工作之后，我想出了这个配置：

var webpack = require('webpack');

module.exports = {
    entry: {
        P: './P.ts',
        VA: './VA.ts',
        SA: './SA.ts',
        VB: './VB.ts'
    },
    output: {
        publicPath: '/dist/',
        library: '[name]'
    },
    module: {
        loaders: [...]
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['SA', 'VA', 'P']
        }),
        new webpack.optimize.CommonsChunkPlugin({
            chunks: ['VB', 'P'],
            name: 'VB'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            chunks: ['VB', 'VA'],
            name: 'VC'
        })
    ]
};

结果呢？创建了SA，VA，VB，VC和P的文件（所以我在第A页包括SA，VA和VC;在B页包含VB，VC和P）但是Webpack认为VC位于依赖图和顶部的位置它的引导代码在那里。进入任何页面时，我都会收到错误：

TypeError：modules [moduleId]未定义

我似乎无法弄清楚如何配置这个东西。

Webpack供应商依赖项和常见块

0 个答案: