如何在Ionic v2中扩展默认的webpack配置

Question

我想扩展离子的默认webpack配置.具体来说,我想添加一个别名来解析模块,这样我就可以按照绝对路径导入模块,而不是相对的模块:

而不是像这样导入模块:

import { SomeComponent } from '../../components/some.component.ts';

我想要

import { SomeComponent } from '@app/components/some.component.ts';

where @app源是根源目录的别名.

在其他项目中,我可以通过向webpack配置添加这样的内容来实现此目的:

module.exports = {
    ...   
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            '@app': path.resolve('./'),
        }
    },
    ...
};

我不知道如何在没有覆盖默认webpack配置的情况下使用Ionic执行此操作.

Answer 1

接受的答案工作正常,但webpack.config.js每次更新时都必须更新app-script.因此,而不是复制的代码,require它在webpack.config.js

package.json

  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  }

webpack.config.js

const webpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config');
webpackConfig.resolve = {
                    extensions: ['.ts', '.js'],
                    alias: {
                            '@app': path.resolve('./'),
                            }
                  }

在大多数情况下,您可以遵循此方法,config每次更新时都不必更新app-script

Answer 2

您可能希望复制现有的webpack.config.js文件,对其进行修改并配置为使用它而不是初始文件.

这是步骤

1. 在项目的根文件夹上创建配置文件夹并将文件复制到该文件夹webpack.config.js(此文件位于..\node_modules\@ionic\app-scripts\config

2. 根据需要修改复制的文件

3. 在package.json您项目的文件中添加:

   "config": { "ionic_bundler": "webpack", "ionic_webpack": "./config/webpack.config.js" }

Answer 3

@Ionic版本中的模块路径映射 - 3.14.0

如果有人遇到类似的麻烦,要找出确切的变化才能使其正常工作.

在离子3(版本3.14.0)中,为了使别名映射工作,您必须在webpack.config.js&中定义路径映射tsconfig.json

1. 的package.json

要使用自定义webpack配置,请配置您package.json的加载自定义webpack.config.js.

"config": {
    "ionic_webpack": "./config/webpack.config.js"
  }

2. 配置/ webpack.config.js

• 引用现有的webpack
• 定义别名路径

• 将别名与默认的webpack配置合并...

  const path = require('path');
  const { dev, prod } = require('@ionic/app-scripts/config/webpack.config');
  const webpackMerge = require('webpack-merge');
  
  const customConfig = {
    resolve: {
      alias: {
        '@app': path.resolve('src/app'),
        '@pages': path.resolve('src/app/pages'),
        '@constants': path.resolve('src/app/constants'),
        '@components': path.resolve('src/app/components'),
        "@shared": path.resolve('src/app/shared')
      }
    }
  };
  
  module.exports = {
       dev: webpackMerge(dev, customConfig),
       prod: webpackMerge(prod, customConfig)
  };
  

3. 配置/测试/ webpack.config.js

• 引用现有的webpack
• 定义别名路径

• 将别名与默认的webpack配置合并...

  const path = require('path');
  const webpackDefault = require('@ionic/app-scripts/config/webpack.config');
  const webpackMerge = require('webpack-merge');
  
  const customConfig = {
    resolve: {
      alias: {
        '@app': path.resolve('src/app'),
        '@pages': path.resolve('src/app/pages'),
        '@constants': path.resolve('src/app/constants'),
        '@components': path.resolve('src/app/components'),
        "@shared": path.resolve('src/app/shared')
      }
    }
  };
  
  module.exports = webpackMerge(webpackDefault, customConfig);
  

4. tsconfig.json

• 定义baseUrl:paths在tsconfig.json类似以下内容:

    {
     "compilerOptions": {
       "baseUrl": "./src",
       "paths": {
         "@app/*": ["app/*"],
         "@pages/*": ["app/pages/*"],
         "@constants/*": ["app/constants/*"],
         "@components/*": ["app/components/*"],
         "@shared/*": ["app/shared/*"]
       }
     },
   }
  

参考:我的离子env信息:

cli包:

@ionic/cli-plugin-proxy : 1.4.13
@ionic/cli-utils        : 1.14.0
ionic (Ionic CLI)       : 3.14.0

全球套餐:

cordova (Cordova CLI) : 7.1.0

本地包裹:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.5.1
Ionic Framework    : ionic-angular 3.6.0