Webpack 不包括 CommonsChunkPlugin 的条目
Webpack exclude entries for CommonsChunkPlugin
我正在尝试设置 webpack 生产配置。一切看起来都很好。但是,我意识到在使用commons chunk插件时,它按预期涵盖了所有共同的文件。我想做的是,将公共库模块和公共应用程序模块分开。我的配置文件是:
module.exports = {
entry: {
lib: ["react", "react-dom"],
app: "./ui-v2/app/app.js",
app2: "./ui-v2/app/app2.js"
},
output: {
path: path.join(__dirname, "target/ui/v2"),
filename: "/app/[name].[chunkhash].min.js"
},
module: {
loaders: [
{
test: /'.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /'.(png|jpg|svg)/,
loader: "file-loader?name=img/[name].[hash].[ext]"
// loaders: ["url", "image-webpack"]
},
{
test: /'.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader", {
publicPath: __dirname
})
},
{
test: /'.(woff|woff2|ttf|eot)$/,
loader: "file-loader?name=fonts/[name].[hash].[ext]"
}
]
},
plugins: [
clean,
new webpack.optimize.CommonsChunkPlugin("common", "app/common.[chunkhash].js"),
new webpack.ProvidePlugin({
React: "react",
ReactDOM: "react-dom",
$: "jquery",
_: "lodash"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
sourceMap: true
},
mangle: {
except: ["exports", "import", "$", "_", "require", "React", "ReactDOM"]
}
}),
new ExtractTextPlugin("styles/[name].[contenthash].css"),
new Manifest()
]
}
基本上我在应用程序中有3个模块; app.js,app2.js和一个常见的组件用户.js。
我想要实现的是将所有与库相关的文件(如 react、react-dom、lodash 等)捆绑在一个 lib 捆绑包中,将常见的应用程序组件(如 user.js)捆绑在一个公共捆绑包中。为此,我认为可能有一个选项可以排除我不希望它们转到"通用"文件的文件。如果我使用此输出,那么库包的长期缓存文件有什么意义,因为每当我在项目中获得一个公共组件时,它们都会进入公共捆绑包并且内容哈希会有所不同,但这个库文件中没有任何变化,如 react、jquery、lodash 等。
无论如何,我在构建过程结束时所拥有的是所有内容仍然进入公共捆绑包,lib 什么都没有,文件大小为 :
app.<hash>.min.js -> 3.05KB
app2.<hash>.min.js -> 3.05KB
lib.<hash>.min.js -> 165 Bytes (has almost nothing!)
common.<hash>.js -> 678 KB
有没有办法实现我想要的,或者在类似情况下生产构建的最佳方法是什么?谢谢!
这是因为 CommonsChunkPlugin 的第一个参数是"common",而它应该是 "lib"。该插件选取名称与其第一个参数的值匹配的条目。
从 webpack 的 wiki 中挑选的一个简单的示例配置 -
var webpack = require("webpack");
module.exports = {
entry: {
app: "./app.js",
vendor: ["jquery", "underscore", ...],
},
output: {
filename: "bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
]
};
请注意,"vendor"条目再次在CommonsChunkPlugin中指定
你应该看看 Webpack 的 DLL 插件。
https://github.com/webpack/webpack/blob/cb3d8e2097503c7245c5dda5b7a6e9d63421a72b/examples/dll/README.md
使用此插件,您可以将常见的第三方供应商依赖项(例如 React 和朋友)捆绑在 DLL 中,这本质上只是一个 JSON 清单,它与您的需求一起包装在 webpack 上下文中并缓存到磁盘。
在你的项目代码中,你将拥有依赖于 React 和朋友的共享组件,你将拥有依赖于共享组件以及 react 和朋友的应用程序代码。
您的项目将包含 DLL 引用插件,如下所示:
https://github.com/webpack/webpack/blob/cb3d8e2097503c7245c5dda5b7a6e9d63421a72b/examples/dll-user/README.md
这将确保你的共享组件和你的应用程序代码从同一个DLL包中提取React和其他第三方模块。 这有助于缩短构建时间,提高开发服务器和热模块重新加载的性能。
- 没有找到相关文章