1

我不懂 webpack，尤其是代码拆分和分块。我是前端开发的新手。

假设我有一个大型多页 AngularJS 应用程序，其中一些页面（但不是全部）使用由许多 AMD 模块组成的大型供应商库的片段，所有这些模块都位于单独的文件中。所以我配置了多个入口点，每个页面一个。制作以下捆绑包似乎是合理的：

  • 每个页面的捆绑包，包含我的应用程序代码，可能还有 css 等
  • 包含我的供应商的 AMD 模块（或至少是我的任何页面使用的所有模块）的捆绑包
  • 包含多个我的应用程序页面使用的常用库（例如 Angular、jquery、moment 等）的捆绑包。

所以我做了以下网页配置：

//Webpack config.
var path = require('path');
var CommonsChunkPlugin = new require("webpack/lib/optimize/CommonsChunkPlugin");
var glob = require('glob');
module.exports = {
    context: path.resolve(__dirname, 'app'),
    entry: {
        page1Entry: './page1Entry.js',
        page2Entry: './page2Entry.js', //There are a few more of these
        vendor: glob.sync("../vendor/**/*.js")
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: "[id].chunk.js"
    },
    resolve: {
        //Resolve non-relative path declared dependencies from the following directories.
        //This means look in the context root (/app) for my app code.
        //look in vendor folder for the vendor requires
        //everything else look in node_modules
        modulesDirectories: ['vendor', 'app', 'node_modules'],
    },
    plugins: [
        new CommonsChunkPlugin({minChunks: 2, name: "commons"}),
        new CommonsChunkPlugin({name: "vendor", chunks: ['vendor']}),
    ]
}

这不会产生预期的结果。我得到的是这样的：

  • page1Entry.bundle.js //包含我的应用程序代码和一些供应商库
  • page2Entry.bundle.js //仅包含我的应用程序代码
  • vendor.bundle.js //几乎完全是空的
  • commons.bundle.js //似乎是正确的，有角度等创建了一些编号的块，例如：
  • 4.chunk.js //small，包含我的两个页面使用的一些应用程序逻辑。没有供应商库——为什么要创建它？
  • 6.chunk.js //巨大的，包含我的一些应用程序逻辑和一些供应商库——为什么？

此外，我看到已部署的代码尝试从服务器获取编号的块，但它没有从部署所有块的我的 /deploymentcontext/js 文件夹中获取它们 - 它试图从页面 URL 加载它们（例如http ://my.domain/my/page/4.chunk.js）。如果我使用 output.publicPath 来配置它，我必须对部署上下文进行硬编码。我怎样才能解决这个问题？

我究竟做错了什么？

4

0 回答 0