Управление упаковкой / пакетированием Webpack 3 (в Ionic3) - PullRequest
Новая
       21

Управление упаковкой / пакетированием Webpack 3 (в Ionic3)

5 голосов
/ 02 апреля 2019

У меня есть куча вещей в node_modules, которые, насколько я могу судить, все заканчиваются в vendor.js, когда я строю свой проект Ionic3.Для простоты, допустим, у меня есть следующие папки в node_modules: abc, xyz, uvw и qrs.Далее скажем, что abc и xyz являются публичными библиотеками, а uvw и qrs являются частными библиотеками.Таким образом, я хотел бы закончить не одним vendor.js, который включает все четыре библиотеки.Скорее, я хотел бы получить vendor.js, который включает в себя abc и xyz, и private.js, который включает в себя uvw и qrs.

Как мне изменить конфигурационные файлы в моем проекте Ionic3 для достижения этого результата?В идеале мне нужно было бы назвать только uvw и qrs в конфигурации и иметь поведение по умолчанию для vendor.js, сгенерированного для «всего остального» в node_modules.

UPDATE Для справки, 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
}

1 Ответ

3 голосов
/ 08 апреля 2019

Если вы используете webpack v4, то optimization.splitChunks.cacheGroups - это то, что вы ищете. Полный документ здесь .

Теперь выглядит так, будто OP хочет вручную выбрать, какой модуль идет в какой комплект. Вот как вы можете это сделать:

  1. Добавьте две новые группы cacheGroup, скажем, optimization.splitChunks.cacheGroups.vendor и .private
  2. Набор 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`
...