Ionic: livereload не работает после включения пользовательского webpack.config.js

После того, как я закончил обновление файла машинописного текста, app-script продолжает процесс сборки, но результат остается тем же. Каждый раз, когда я делаю изменения, перезапуск сервера очень раздражает.

Например, когда я изменил одну строку кода из console.log('ABC') в console.log('DEF')консоль распечатывает ABC снова.

Я воспроизвел образец проекта Ionic 3 для тестирования livereload без использования пользовательского файла конфигурации веб-пакета, и все прошло отлично.

Похоже, я что-то упустил в моем файле конфигурации. Что я здесь не так делаю?

webpack.config.js

const path = require('path');
const webpackDefault = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');

const customConfig = {
  dev: {
    resolve: {
      alias: {
        '@myproject-app': path.resolve('src/app'),
        '@myproject-environments': path.resolve('src/environments'),
        '@myproject-pages': path.resolve('src/pages'),
      }
    }
  },
  prod: {
    resolve: {
      alias: {
        '@myproject-app': path.resolve('src/app'),
        '@myproject-environments': path.resolve('src/environments'),
        '@myproject-pages': path.resolve('src/pages'),
      }
    }
  }
};

module.exports = webpackMerge(webpackDefault, customConfig);

пакеты cli: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

глобальные пакеты:

cordova (Cordova CLI) : 7.1.0

местные пакеты:

@ionic/app-scripts : 3.1.7
Cordova Platforms  : android 6.3.0 browser ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

система:

ios-deploy : 1.9.2
Node       : v8.9.0
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b
Источник

2 ответа

Решение

Я решил свою проблему, следуя инструкциям из переменных gshigeto / ionic-environment. Мне не нужно дублировать исходную конфигурацию. Я надеюсь, что этот ответ поможет другим.

const chalk = require("chalk");
const fs = require('fs');
const path = require('path');
const useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

let env = process.env.IONIC_ENV;

useDefaultConfig.prod.resolve.alias = {
  "@projectname-app": path.resolve('src/app'),
  "@projectname-components": path.resolve('src/components'),
  "@projectname-core": path.resolve('src/core'),
  "@projectname-env": path.resolve(environmentPath('prod')),
  "@projectname-pages": path.resolve('src/pages'),
};

useDefaultConfig.dev.resolve.alias = {
  "@projectname-app": path.resolve('src/app'),
  "@projectname-components": path.resolve('src/components'),
  "@projectname-core": path.resolve('src/core'),
  "@projectname-env": path.resolve(environmentPath('dev')),
  "@projectname-pages": path.resolve('src/pages'),
};

if (env !== 'prod' && env !== 'dev') {
  // Default to dev config
  useDefaultConfig[env] = useDefaultConfig.dev;
  useDefaultConfig[env].resolve.alias = {
    "@projectname-env": path.resolve(environmentPath(env))
  };
}

function environmentPath(env) {
  var filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
  if (!fs.existsSync(filePath)) {
    console.log(chalk.red('\n' + filePath + ' does not exist!'));
  } else {
    return filePath;
  }
}

module.exports = function () {
  return useDefaultConfig;
};
Источник

Я столкнулся с той же проблемой, что и вы, с той же точной реализацией. Мне удалось это исправить, просто скопировав исходную конфигурацию ionic webpack и вставив ее в свой файл конфигурации webpack. Очевидно, что он не так чист, как решение для слияния, но он работает.

Источник
Другие вопросы по тегам