控制 Ionic3 中的包捆绑

共1个回答, 标签: webpack ionic3

我在节点 _ 模块中有很多东西, 从我所能看出的情况来看, vendor.js 当我构建我的 Ionic3 项目时, 所有这些东西最终都会出现。为了简单起见, 假设我在节点 _ 模块中有以下文件夹: abc、xyz、uvw 和 qrs. 让我们进一步说, abc 和 xyz 是公共图书馆, 但 uvw 和 qrs 是私有库。因此, 我希望最终没有一个 vendor.js 包含所有四个库的单一。相反, 我想最终 vendor.js 得到一个包括 abc 和 xyz 的, 一个 private.js 包括 uvw 和 qrs 的。

如何更改 Ionic3 项目中的配置文件以实现该结果?理想情况下, 我只需在配置中命名 uvw 和 qrs, 并为节点 _ 模块中的 "其他一切" 生成 vendor. js 的默认行为。

更新功能作为参考, Ionic 3.9.2 使用了 Webpack 3.10.0, 默认的 Ionic web 包配置如下所示。我真的只关心做我上面描述的行为的生产构建。

/*
 * 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: ionicWebpackFactor
第1个答案

如果您使用的是 webpack v4, 那么 optimization.splitChunks.cacheGroups 就是您要查找的内容。正式的医生在这里

现在看起来 op 想要手动选择什么模块转到哪个包。您可以这样做:

  1. 添加两个新的缓存组, 说 optimization.splitChunks.cacheGroups.vendor.private
  2. 设置 filenameenforce test 字段
cacheGroups.vendor = {
  filename: 'vendor.js',
  enforce: true,
  test: (module) => {
    const vendorList = ['abc', 'xyz']
    return vendorList.includes(module.name)
  }
}

// Similar config for `cacheGroups.private`

相关问题

类型错误: clean webpackplugin 不是构造函数 Postcss-svgo: TypeError: 无法设置未定义 (盖茨比) 的属性 “multiscont” Webpack 文件加载器输出 [目标模块] 游戏服务中存在的问题--基于离子的测量 谷歌 6月17日 Firebase SDK 更新后,Ionic Cordova 应用程序停止编译 错误: 找不到 org.jetbrains.kotlin: kotlin-stdlib-jdk8: 1.3.60-离子 3 中的 eap-25