webpack - 控制 Webpack 3 捆绑/分块(在 Ionic3 中)
问题描述
我在 node_modules 中有一堆东西,据我所知,vendor.js
当我构建我的 Ionic3 项目时,它们最终都会出现。为简单起见,假设我在 node_modules 中有以下文件夹:abc、xyz、uvw 和 qrs。让我们进一步说 abc 和 xyz 是公共图书馆,但 uvw 和 qrs 是私人图书馆。因此,我不想最终得到一个vendor.js
包含所有四个库的单一文件。相反,我想最终得到一个vendor.js
包含 abc 和 xyz 的 a,以及一个private.js
包含 uvw 和 qrs 的 a。
如何更改 Ionic3 项目中的配置文件以实现该结果?理想情况下,我只需要在配置中命名 uvw 和 qrs,并为 node_modules 中的“其他所有内容”生成 vendor.js 的默认行为。
更新 作为参考,Ionic 3.9.2 使用 Webpack 3.10.0,默认的 Ionic webpack 配置如下所示。我真的只关心执行我上面描述的行为的生产构建。
/*
* The webpack config exports an object that has a valid webpack configuration
* For each environment name. By default, there are two Ionic environments:
* "dev" and "prod". As such, the webpack.config.js exports a dictionary object
* with "keys" for "dev" and "prod", where the value is a valid webpack configuration
* For details on configuring webpack, see their documentation here
* https://webpack.js.org/configuration/
*/
var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
var optimizedProdLoaders = [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: [
{
loader: process.env.IONIC_CACHE_LOADER
},
{
loader: '@angular-devkit/build-optimizer/webpack-loader',
options: {
sourceMap: true
}
},
]
},
{
test: /\.ts$/,
loader: [
{
loader: process.env.IONIC_CACHE_LOADER
},
{
loader: '@angular-devkit/build-optimizer/webpack-loader',
options: {
sourceMap: true
}
},
{
loader: process.env.IONIC_WEBPACK_LOADER
}
]
}
];
function getProdLoaders() {
if (process.env.IONIC_OPTIMIZE_JS === 'true') {
return optimizedProdLoaders;
}
return devConfig.module.loaders;
}
var devConfig = {
entry: process.env.IONIC_APP_ENTRY_POINT,
output: {
path: '{{BUILD}}',
publicPath: 'build/',
filename: '[name].js',
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [path.resolve('node_modules')]
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.ts$/,
loader: process.env.IONIC_WEBPACK_LOADER
}
]
},
plugins: [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
ionicWebpackFactory.getCommonChunksPlugin()
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
var prodConfig = {
entry: process.env.IONIC_APP_ENTRY_POINT,
output: {
path: '{{BUILD}}',
publicPath: 'build/',
filename: '[name].js',
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [path.resolve('node_modules')]
},
module: {
loaders: getProdLoaders()
},
plugins: [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
ionicWebpackFactory.getCommonChunksPlugin(),
new ModuleConcatPlugin(),
new PurifyPlugin()
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
module.exports = {
dev: devConfig,
prod: prodConfig
}
解决方案
如果您使用的是 webpack v4,那么optimization.splitChunks.cacheGroups
这就是您要找的。完整的文档在这里。
现在看起来 OP 想要手动选择哪个模块去哪个包。您可以这样做:
- 添加两个新的缓存组,比如说
optimization.splitChunks.cacheGroups.vendor
和.private
- 设置和字段
filename
_enforce
test
cacheGroups.vendor = {
filename: 'vendor.js',
enforce: true,
test: (module) => {
const vendorList = ['abc', 'xyz']
return vendorList.includes(module.name)
}
}
// Similar config for `cacheGroups.private`
推荐阅读
- clojurescript - 如何使用 ClojureScript 打开一个新窗口?
- javascript - VueJs (Quasar),路由器中的 vuex 存储访问
- oracle - 插入触发器后使用新插入的数据更新列
- python - 在Python中合并具有相同键的字典层次结构
- r - 按月年日期列排序数据框
- azure-data-factory - 是否可以通过 Git 为 ADFv2 中的 HDInsightHive 活动类型获取 Hive 脚本?
- python-3.x - 如何在使用python的插入查询中将mongodb内置函数作为参数传递
- python - 单击网页上的按钮后为空 GET 响应
- javascript - 打字稿泛型:使用输出参数类型来构建输入参数类型
- c# - 如何统一将标记实例化为球体对象(GLOBE)