ionic debug and webpack

1 ionic framework debug
    F5(启动调试) and modify the generated launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug ionic",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules\\@ionic\\app-scripts\\bin\\ionic-app-scripts.js",
      "args": [
          "serve", "--debug", "--port 8100", "--livereload-port 35739", "--r 35739", "--address 0.0.0.0"
      ],
      "outFiles": [
          "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

       
2 ionic app debug
    1) install plugin: Debugger for Chrome

    2) add in package.json

  "config": {
    "ionic_source_map": "source-map"
  },

    3) modify the generated launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug ionic app",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8100",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/www"
    }
  ]
}

  4) run 'ionic serve -b' to start app and then F5(启动调试)

3 webpack customization

   1) add in package.json

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

   2) copy  node_modules\@ionic\app-scripts\config\webpack.config.js to new config folder.

   3) modify entry and plugins section:

  entry: {
    app: process.env.IONIC_APP_ENTRY_POINT,
    //添加要打包在vendors里面的库
    vendors: ['@angular/core','ionic-angular'],
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    new webpack.optimize.CommonsChunkPlugin({  
        name: "vendors",
        filename: 'vendors.js', 
        minChunks: Infinity
    }),
  ],

   The webpack result (ionic 3.3):