Google News
logo
Aurelia - Interview Questions
How to Migrate from CLI built-in bundler to Webpack in Aurelia?
There are differences between the Aurelia CLI bundler and the Webpack bundler. When you are migrating an existing application from the integrated bundler to Webpack there are a few things to keep in mind.
 
Webpack requires the use of PLATFORM.moduleName() for any module reference in the code, except for the import statements. PLATFORM can be imported using import {PLATFORM} from 'aurelia-pal';.
 
A few examples :
 
* in main.js or main.ts do aurelia.setRoot(PLATFORM.moduleName('app')).
* for routes do { ...., name: 'users', moduleId: PLATFORM.moduleName('./users'), ... }
* @useView(PLATFORM.moduleName('my-view.html'))
* .resources(PLATFORM.moduleName('resources/index'))
* when Webpack cannot find a module even though it exists, you likely are missing a PLATFORM.moduleName for that module

The Aurelia CLI bundler gets its bundle configuration from the aurelia_project/aurelia.json file. This is different for Webpack, where the bundle configuration is inside webpack.config.js. Webpack projects created by the CLI use Aurelia's Webpack Plugin, which you'll find in webpack.config.js.
 
If you use SASS or LESS, then you are going to have to import the stylesheets differently. When you include stylesheets and use the Aurelia CLI bundler, then your <require> statements will have the .css extension: <require from="styles/my-stylesheet.css"></require>. When you use Webpack you have to change this into the .sass or .less extension: <require from="styles/my-stylesheet.sass"></require>.
Advertisement