Как использовать веб-пакет для замены строк в /config.xml?Я могу заменить строки в файлах .ts с помощью string-replace-webpack-plugin, но не могу понять, как заменить строки в config.xml (или, если это вообще возможно, с веб-пакетом).
Ionic предоставляетготовый веб-пакет для стандартных сборок (включен ниже).Я написал собственный веб-пакет и использую webpack-merge (чтобы мне не пришлось менять оригинальный веб-пакет).
Мне удалось взломать готовый веб-пакет, чтобы добавить дополнительныйзапись в config.xml, но, несмотря на то, что замена строки вошла в журнал успешно для поддержки окончательной сборки, она не включала замену строки.
Этот плагин кажется идеальным replace-in-file-webpack-plugin за исключением того, что выполняется замена "после".
Подойдет ли здесь предварительный загрузчик веб-пакетов или какой-то другой подход?
global.variables.ts Успешно обновлено:
export const test: string = '!ReplaceMe!';
Мой пользовательский веб-пакет:
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)
};
Ionic 3 "из коробки":
/*
* 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
}