如何在 Ionic v2 中扩展默认的 webpack 配置 [英] How to extend default webpack config in Ionic v2

问题描述

我想扩展 ionic 的默认 webpack 配置.具体来说，我想添加一个别名来解析模块，以便我可以通过绝对路径而不是相对路径导入模块:

I'd like to extend the default webpack config of ionic. Specifically, I'd like to add an alias for resolving modules so that I can import modules by their absolute path, rather than a relative one:

而不是像这样导入模块:

Instead of importing modules like this:

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

我想

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

其中 @app 是根源目录的别名.

where @app is an alias for the root source directory.

在其他项目中，我可以通过在 webpack 配置中添加类似的东西来做到这一点:

In other projects I was able to do this by adding something like this to the webpack config:

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

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

I'm not sure how to do this with Ionic without overriding the default webpack config.

推荐答案

你可能想复制现有的 webpack.config.js 文件，修改它并配置为使用它而不是初始的.

You may want to copy the existing webpack.config.js file, modify it and configure to use it instead of the initial one.

步骤如下

1. 在你项目的根目录下创建 config 文件夹并将文件 webpack.config.js 复制到那里(这个文件位于 .. ode_modules@ionicapp-scriptsconfig

1. On the root folder of your project create config folder and copy the file webpack.config.js there (this file is located in .. ode_modules@ionicapp-scriptsconfig

根据需要修改复制的文件

Modify the copied file as required

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

In the file package.json from your project add:

<代码>配置":{"ionic_bundler": "webpack","ionic_webpack": "./config/webpack.config.js"}

这篇关于如何在 Ionic v2 中扩展默认的 webpack 配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！