如何在 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. 在项目的根文件夹中创建配置文件夹并将文件 webpack.config.js 复制到那里(该文件位于 .. ode_modules@ionic应用脚本配置

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屋！