我想知道是否有可能用一些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';
好的,我已经设法做到了:
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组件。