离子3的`src`的路径别名

Question

I have a custom webpack configuration for Ionic 3 to use src as a path alias (ie to import from src/module/file ):

resolve: {
  alias: {
    'src': path.resolve('./src')
  }
}

However, with Ionic app scripts @ 3, when I try to serve or build I get an error Cannot find module src/module/file .

I have seen ways to create path aliases to import from directories under src (such as app , pages , etc.) that involve updating the Webpack resolve alias as I have as well as updating baseUrl for tsconfig.json . For example:

https://medium.com/@siddhartha.ng/ionic-3-import-using-aliases-2aa260d6fab3

However, I want to be able to import from src rather than a subdirectory of src . Is there any way to do this by changing my webpack or TypeScript configuration?

Answer 1

Per the updates to Ionic 3, webpack configuration now has two top-level properties, dev and prop for corresponding webpack configurations.

This means that you have to update the dev and prod properties and export the entire object from the webpack configuration. You can do this any way you like, but for example:

const config = require('@ionic/app-scripts/config/webpack.config.js');

config[process.env.IONIC_ENV].resolve.alias = { src: path.resolve('./src') };

module.exports = config; // you can also export a function that returns this

Just keep in mind that you need to export the whole object with both configurations. module.exports = config[env] won't work.