- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 node_modules 中有一堆东西,据我所知,它们都以 vendor.js
结尾。当我构建我的 Ionic3 项目时。为简单起见,假设我在 node_modules 中有以下文件夹:abc、xyz、uvw 和 qrs。让我们进一步说 abc 和 xyz 是公共(public)图书馆,但 uvw 和 qrs 是私有(private)图书馆。因此,我不想得到一个 vendor.js
这包括所有四个库。相反,我想以 vendor.js
结束。包括 abc 和 xyz 以及 private.js
包括uvw和qrs。
如何更改 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
就是你要找的。完整文档 here .
现在看起来 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`
关于webpack - 控制 Webpack 3 捆绑/分块(在 Ionic3 中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55481447/
我有一个要提交的 iOS 应用程序,我的应用程序在我的 iPhone 上运行。我将 apple id 帐户添加到 Xcode 并在 Xcode 的常规部分下输入我的 bundle id,然后单击“修复
我有一个SDK项目,它在gradle中引用了很多依赖项。我必须要求SDK用户在项目中使用SDK时添加这些依赖项。问题是,每当我添加一些新的依赖项或将当前的依赖项替换为新的依赖项时,我都必须要求用户进行
我使用 Microsoft.AspNet.Web.Optimization用于 css 和 js 捆绑和缩小的 nuget 包。 我在这个路径 ~/bundles/shared.css 中创建了一个包
我使用 laravel-mix(包括 webpack)来打包 JS 文件。使用 BundleAnalyzerPlugin,我发现我的输出文件包含多个 JQuery 库副本,这增加了输出文件的大小。 它
我正在使用 maven felix 插件来创建 OSGi 包,但是假设您有一个包“com.example”存在于project1和project2中。此外,project2 依赖于 project1。
当我尝试捆绑我的 Meteor 应用程序时,我得到: $ meteor bundle app.tgz Errors prevented bundling: Exception while bundli
因此查看 bundleconfig.cs 它应该允许基于设备类型进行捆绑。唯一的问题是因为它在 App_Start 中,所以不允许我访问 Request 对象。有什么想法可以实现基于设备的捆绑吗? 最
上下文 http://news.ycombinator.com/item?id=4125530 问题: 这是否最终意味着 Java 应用程序将能够发布到 Mac 商店? (因为 JRE 自动捆绑到应用
我正在尝试为一个 React/Redux 项目创建我自己的 Webpack 配置。配置看起来很好,但是包的大小很大(在开发模式下,我知道如何在生产模式下减少它) 我的 package.json 看起来
所以我一直收到这个 Bundle ID 错误,说它不可用而且我真的不知道如何修复它。这是错误: 提供的数据有误。请更正并重新提交。标识符为“com.team.AppName”的 App ID 不可用。
我正在浏览 SO 并找到了 some code这向我提出了一个问题。 struct node* BuildOneTwoThree() { struct node *list = malloc(3 *
我正在为 Delphi XE7 使用 intraweb XIV 捆绑版。当我在这个新的捆绑版本中测试一个 intraweb XII 应用程序时,SSL/TLS 不工作。捆绑版本不支持 SSL/TLS?
预期: 当我使用 webpack 构建时,我的所有 JS 文件都会被捆绑,除了 ./src/Portfolio 目录中的文件(根据我的 Webpack.config.js 设置)。 实际: Webpa
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improve
我有一个项目引用了许多开源库,有些是新的,有些不是很新。也就是说,它们都很稳定,我希望坚持使用我选择的版本,直到我有时间迁移到更新的版本(我昨天测试了 hsqldb 2.0,它包含许多 api 更改)
我正在创建一个 REST API,并且我一直在研究允许捆绑来自客户端的请求的想法。我所说的捆绑是指他们可以发送一个包含多个“真实”请求的请求,然后将它们一起交付给客户。通常是 javascript a
在我的 AngularJS 项目中,我有一个 HTML 模板,其中 innerText 位于新行中: Click here 我正在使用 webpack 作为我的捆绑器。我希望它 trim
我已经为我的应用程序创建了一个静态库。现在,我的应用程序使用我在应用程序中引用的 plists 和图像等来源。 如何捆绑这些图像并将它们与静态库一起交付,以及我需要在源加载代码中进行哪些更改才能从该
所以, 我是 webpack 的新手,我正在开发一个项目,在该项目中我们只加载一个文件 bundle.js,我知道我可以单独加载文件。 但我想要的是bundle.js中未缩小的文件。目前我正在获取缩小
如何使用用户区域设置登录路径?我试过了 check_path: /{_locale}/login_check 和 check_path: /(en|ru)/login_check 但什么也没有
我是一名优秀的程序员,十分优秀!