小编典典

Webpack-构建无依赖的捆绑软件

reactjs

我想知道是否有可能用一些javascript文件构建捆绑包,但没有依赖关系?

我想与React组件捆绑在一起(在我的案例中,每个react组件都是由很少的react组件构建的,例如Comment组件包括注释框,列表和表单),我可以通过指定很少的条目将React组件拆分为单独的文件webpack中的要点,但是如果我有:1.组件注释2.组件时事通讯,而且它们都需要ReactDOM,将生成的文件大小约为600kb,其中我的react组件仅包含约100行js代码。

我想再有一个文件,其中将包含所有来自“ 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';

阅读 287

收藏
2020-07-22

共1个答案

小编典典

好的,我已经设法做到了:

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

将确保捆绑包“供应商”中包含的代码未包含在任何其他捆绑包中。通过这种方法,评论和新闻简报将仅包含我的React组件。

2020-07-22