Question

我不了解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 // huge，包含我的一些app逻辑和一些供应商库 - 为什么？

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

我做错了什么？

Webpack代码拆分和分块

0 个答案: