Webpack弦取代离子3/ Cordova 5 Config.xml

Question

如何用webpack替换/config.xml中的字符串？我可以用字符串替换webpack插件来替换.ts文件中的字符串，但是我想不出如何在config.xml中替换字符串(或者如果用webpack可以的话)。

离子为标准建筑提供了一个开箱即用的webpack (包括下面)。我已经写了一个自定义webpack，并使用webpack-合并(这样我就不会改变原来的webpack)。

我能够破解开箱即用的webpack，以添加一个额外的条目到config.xml，但即使字符串替换成功记录，以控制台，最终的构建不包括字符串替换。

这个插件似乎完美的替换文件中的webpack插件，但它做了一个替代“后”编译完成。

webpack的预装载机会更适合这里还是其他方法？

global.variables.ts成功更新：

export const test: string = '!ReplaceMe!';

我的习俗Webpack:

const path = require('path');
const { dev, prod } = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');
var stringReplacePlugin = require('string-replace-webpack-plugin');

const customConfig = {
    module: {
        loaders: [
            // This replacement does NOT work.
            {
                test: /config.xml$/,
                loaders: [
                    'raw-loader',
                    stringReplacePlugin.replace({
                        replacements: [
                            {
                                pattern: /!(\w*?)!/ig,
                                replacement: function (match, p1, offset, string) {
                                    console.log('Success xml!') // This is NOT logged to the console.
                                    return 'Replaced!';
                                }
                            }
                        ]
                    })
                ]
            },
            // This replacement works.
            {
                test: /global.variables.ts$/,
                loader: stringReplacePlugin.replace({
                    replacements: [
                        {
                            pattern: /!(\w*?)!/ig,
                            replacement: function (match, p1, offset, string) {
                                console.log('Success ts!') // This is successfully logged to the console.
                                return 'Replaced!';
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new stringReplacePlugin()
    ]
}

module.exports = {
    dev: webpackMerge(customConfig, dev),
    prod: webpackMerge(customConfig, prod)
};

离子3盒外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
}

Answer 1

我用0.0.35版本更新了@ and /(@离子型/app-脚本)的版本，对于3.1.8版的应用脚本，我将@角-devkit/构建-优化器更新为0.6.8版。现在我可以用离子3.9.2和FireBase5.3.0进行生产构建了。