问如何在离子v2中扩展默认webpack配置

EN

您可能希望复制现有的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" }

接受的答案工作正常，但每次更新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

@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"
  }

1. config/webpack.config.js

• 参考现有webpack
• 定义别名路径
• 将别名与默认webpack配置合并. const路径= require(' path ')；const { dev，prod }= require('@ionic/app-scripts/config/webpack.config')；const webpackMerge = require('webpack-merge')；const customConfig ={customConfig：{别名：{ '@app'：path.resolve('src/app')，'@pages'：path.resolve('src/app/pages')，‘@常数’：path.resolve(‘src/app/常数’)，'@components'：path.resolve('src/app/components')，"@shared"：path.resolve('src/app/shared') } }；module.exports ={ dev: webpackMerge(dev，customConfig)，prod: webpackMerge(prod，customConfig) }；

1. config/test/webpack.config.js

• 参考现有webpack
• 定义别名路径
• 将别名与默认webpack配置合并. 康斯特路径=要求(‘路径’)；const webpackDefault = require('@ionic/app-scripts/config/webpack.config')；const webpackMerge = require('webpack-merge')；const customConfig ={customConfig：{别名：{ '@app'：path.resolve('src/app')，'@pages'：path.resolve('src/app/pages')，‘@常数’：path.resolve(‘src/app/常数’)，'@components'：path.resolve('src/app/components')，"@shared"：path.resolve('src/app/shared') } }；module.exports = webpackMerge(webpackDefault，customConfig)；

1. tsconfig.json

• 在baseUrl & paths中定义tsconfig.json，如下所示： { "compilerOptions"：{ "baseUrl"："./src"，“路径”：{ "@app/*"："app/*"，"@pages/*"：“app/baseUrl/*”，“@常数/*”：“app/常数/*”，"@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