Webpack - 构建没有依赖的捆绑包

Question

我想知道是否可能构建一个包含一些JavaScript文件但没有依赖项的捆绑包？

我想要小型的捆绑包，其中包含React组件（在我的情况下，每个React组件都由几个React组件构建而成，例如评论组件包括评论框、列表和表单）， 我可以通过在webpack中指定几个入口点来将React组件拆分为单独的文件，但如果我有： 1. 组件评论 2. 组件新闻通讯 并且它们都需要ReactDOM，生成的文件将有大约600kb大小，而我的React组件仅包含约100行JavaScript代码。

我希望有另一个文件，其中包含所有来自“require('react-dom')”的代码以及那两个仅包含React组件代码的文件。这是可能的吗？

我的当前设置：

'use strict';
import path from 'path';
import CommonsChunkPlugin from "webpack/lib/optimize/CommonsChunkPlugin";
module.exports = {
    entry: {
        app: "./app.js",
        newsletter: "./components/renderers/newsletter.renderer.js",
        comment: "./components/renderers/comment.renderer.js"
    },
    output: {
        path: path.join(__dirname),
        filename: "built/[name].entry.js"
    },
    devtool: 'sourcemaps',
    cache: true,
    debug: true,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: [/(node_modules)/],
                loader: 'babel'
            }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx']
        }
    },
    plugins: [
        new CommonsChunkPlugin({
            name: "comment.js",
            chunks: ["comment", "app"],
            minChunks: 2
        }),
        new CommonsChunkPlugin({
            name: "newsletter.js",
            chunks: ["newsletter", "app"],
            minChunks: 2
        })
    ]
};

Comment.renderer.js:

import CommentBox from './../comment/commentBox';
ReactDOM.render(
    <CommentBox/>,
    document.getElementById("comment")
);

Newsletter.renderer.js:

import Newsletter from './../newsletter/newsletter';
ReactDOM.render(
    <Newsletter/>,
    document.getElementById("newsletter")
);

app.js:

'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import client from './lib/client';

- Ma Kro

---

以下是需要翻译的内容：https://github.com/webpack/docs/wiki/list-of-plugins#commonschunkpluginCommonsChunkPlugin 插件可以将多个入口 chunk 中的公共模块（也就是 commons chunk）提取到一个单独的 chunk 中，以便在多页面之间共享该模块。当然，这样做也有助于长期缓存，因为公共模块通常比其他模块更少更稳定。 - zerkms

Webpack应该自动去重代码。你能详细说明一下你的设置吗？ - Josh Beam

我已经更新了我的帖子。我只想补充一下，我已经从CommentBox和Newsletter中删除了所有导入。也许我应该导入app.js？我认为在我的页面上使用这样的配置需要包含： - Ma Kro

comment.js、newsletter.js和app.js，其中comment.js有666kb，newsletter.js有4kb，而app.js有1kb。如果我想在不同的页面上包含newsletter.js，那么它将无法工作，因为我只想包含app.js和newsletter.js，对吧？ - Ma Kro

小更新。在其中一个评论组件文件中，有一个React的导入，这就是为什么它有666kb的原因。删除后，一切都只有6kb，但这也是无效的，因为没有React或React-DOM代码。如何创建这样的“commons.js”文件？ - Ma Kro

我已经再次更新了配置文件，现在使用这个配置文件，我得到了一个大的app.entry.js文件，小的React组件文件。但是，在部署后，我遇到了错误：未捕获的引用错误：webpackJsonp未定义。 - Ma Kro

Answer 1

我在webpack.config.js中使用以下代码来从bundle中排除外部依赖项。

module.exports = {
     ...
     ...
    externals:{
       "react": "React",
       "react-dom": "ReactDOM"
     },
     ...
     ...
}

我从这个链接找到了答案。

- AnandShanbhag

Answer 2

为了补充@AnandShanbhag的回答，您可以使用以下函数将package.json中的所有依赖项转换为外部引用：

module.exports = {

    ...

    // put everything inside package.json dependencies as externals
    externals: Object.keys(require('./package.json').dependencies)
        .reduce(
            function (acc, cur) {
                acc[cur] = cur
                return acc
            },
            new Object()
        ),

    ...

}

- Lucas Noetzold

Answer 3

好的，我已经学会如何做到这一点：

好的，我已经搞定了：

import path from 'path';
import CommonsChunkPlugin from "webpack/lib/optimize/CommonsChunkPlugin";
module.exports = {
    entry: {
        vendor: ["react","react-dom", "underscore"],
        comment: "./components/renderers/comment.renderer.js",
        newsletter: "./components/renderers/newsletter.renderer.js"
    },
    output: {
        path: path.join(__dirname),
        filename: "built/[name].bundle.js"
    },
    devtool: 'sourcemaps',
    cache: true,
    debug: true,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: [/(node_modules)/],
                loader: 'babel'
            }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx']
        }
    },
    plugins: [
        new CommonsChunkPlugin({
            name: "vendor",
            minChunks: Infinity
        })
    ]
};

this part:

minChunks: Infinity

这将确保捆绑在 "vendor" 中的代码不会包含在任何其他捆绑中。由于这种方法，评论和通讯稿将仅包含我的React组件。

- Ma Kro

---

截至2021年，Common Chunks Plugin已被移除。 - Aditya