Webpack

When the application is ready for deployment, anpylar-webpack comes to the rescue in order to automate the process of packaging. It may not even be for production, but just for a taste of real testing.

During development with a dir based application there is something which all developers will notice:

• Some initial 404 Not Found answers are delivered when looking for .py files. Which is simply due to the need to look for the right file when importing.

  Once we have packaged our application, this will be gone.

A typical layout

Our Tour of Pyroes has already shown the layouts, so let’s simply reuse them:

├── app
│   ├── dashboard
│   │   ├── __init__.py
│   │   ├── dashboard_component.css
│   │   ├── dashboard_component.html
│   │   └── dashboard_component.py
│   ├── pyro_detail
│   │   ├── __init__.py
│   │   ├── pyro_detail_component.css
│   │   ├── pyro_detail_component.html
│   │   └── pyro_detail_component.py
│   ├── pyro_search
│   │   ├── __init__.py
│   │   ├── pyro_search_component.css
│   │   ├── pyro_search_component.html
│   │   └── pyro_search_component.py
│   ├── pyroes
│   │   ├── __init__.py
│   │   ├── pyroes_component.css
│   │   ├── pyroes_component.html
│   │   └── pyroes_component.py
│   ├── __init__.py
│   ├── app_component.css
│   ├── app_component.html
│   ├── app_component.py
│   ├── app_module.py
│   ├── app_routing.py
│   ├── mock_pyroes.py
│   ├── pyro.py
│   ├── pyro_search_service.py
│   └── pyro_service.py
├── anpylar.js
├── index.html
├── package.json
└── styles.css

And we’d ideally reduce this to the minimum possible amount of files. Let’s try webpacking. Enter the directory and simply execute:

anpylar-webpack

And the result will be this (omitting everything we have already seen above):

├── __webpack__
│   ├── anpylar.js
│   ├── index.html
│   ├── package.json
└── └── styles.css

This is what happened:

• anpylar-webpack has taken our complete application and packaged it inside anpylar.js.

• And it has placed all necessary files inside the newly created __webpack__ directory.

And now when the application is served, everything will be directly served from the contents stored in anpylar.js

The webpacking process can be tuned using package.json. The options:

• packages (an array of directories to package).

  In our sample above, the entry looks like this:

  "packages": [
     "app"
  ],
  

• debug (a boolean: default false)

  The default anpylar.js keeps the line information activated for debugging purposes when finding errors.

  Set it to true to keep this behavior in the packaged application.

See also

anpylar-webpack has several command line switches to control its behavior. See the reference Webpack if you need more.