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

Webpack - build bundle without dependencies

本文关键字：关系 依赖 构建 Webpack-      更新时间：2023-09-26

I；我想知道是否可以用一些javascript文件构建一个没有依赖关系的捆绑包？

我想拥有包含React组件的小捆绑包（在我的案例中，每个React组件都是由几个React组件构建的，例如Comment组件包括注释框、列表和表单），我可以通过在webpack中指定几个入口点来将React组件拆分为单独的文件，但如果我有：1.组件注释2.组件时事通讯它们都需要ReactDOM，生成的文件大约有600kb，而我的react组件只包含大约100行js代码。

我想再多一个文件，它将包含来自"require"（"act-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.render.js:

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

时事通讯.render.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';

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

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

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

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

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
        })
    ]
};

这部分：

minChunks: Infinity

将确保捆绑包"vendor"中包含的代码不包含在任何其他捆绑包中。多亏了这种方法，评论和时事通讯将只包含我的React组件。

为了补充@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()
        ),
    ...
}
相关文章：