[英]Webpack - build bundle without dependencies
我想知道是否可以用一些 javascript 文件构建一个没有依赖关系的包?
我想有 React 组件的小包(在我的例子中,每个 React 组件都是由几个 React 组件构建的,例如 Comment 组件包括评论框、列表和表单),我可以通过指定几个条目将 React 组件拆分到一个单独的文件中指向 webpack,但如果我有:1. 组件评论 2. 组件时事通讯并且它们都需要 ReactDOM,将生成的文件将有大约 600kb,其中我的反应组件仅包含约 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
})
]
};
评论.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")
);
应用程序.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
获取所有依赖项,并使用 function 将它们转换为外部:
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()
),
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.