Webpack - 构建没有依赖关系的bundle [英] Webpack - build bundle without dependencies
问题描述
我想知道是否可以使用一些javascript文件构建一个包但没有依赖关系?
I;m wondering if it's possible to build a bundle with some javascript files but without dependencies?
我想要使用React组件的小包(每个反应组件)在我的例子中是由几个反应组件构建的,例如注释组件包含注释框,列表和表单),
我可以通过在webpack中指定几个入口点将React组件拆分为单独的文件,但是如果我有:
1.组件评论
2.组件通讯
并且它们都需要ReactDOM,将生成的文件将具有600kb,其中我的反应组件仅包含~100行js代码。
I want to have small bundles with React components (each react component in my case is builded from few react components, for example Comment component incldues comment box, list, and form), I can split React components to a separate files by specifying few entry points in webpack, but if I have: 1. Component comment 2. Component newsletter and both of them require ReactDOM, files which will be generated will have like 600kb, where my react components contain only ~100 lines of js code.
我想再增加一个文件,其中包含来自require('react-dom')的所有代码,而这两个文件只会有可能是React组件代码吗?
I would like to have one more file which will contain all the code which would come from "require('react-dom'), and those two files which will only have the React component code. is that possible?
我目前的设置:
'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:
Comment.renderer.js:
import CommentBox from './../comment/commentBox';
ReactDOM.render(
<CommentBox/>,
document.getElementById("comment")
);
Newsletter.renderer.js:
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';
推荐答案
好的我已经设法如何做到:
Ok I've managed how to do that:
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组件。
will ensure that code included in bundle "vendor" is not included in any other bundle. Thanks to this approach, comment and newsletter will contain only my React components.
这篇关于Webpack - 构建没有依赖关系的bundle的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!