ionic debug and webpack

来源：互联网发布：dmp怎么导入数据库编辑：程序博客网时间：2024/06/10 15:24

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):

阅读全文

0 0