cordova-template-webpack-babel-scss

cordova-template-webpack-babel-scss 0.3.1

This template is designed to make it easy for you to write ES2015+ and SCSS code, and then bundle that code using webpack v2. It will do this automatically each time you run any Cordova/PhoneGap command that triggers the prepare phase.

Requirements

• Node v5 or better

• Cordova / PhoneGap CLI installed

Usage

You can create a project using this template as follows:

$ cordova create hello com.example.hello hello --template cordova-template-webpack-babel-scss

Once the project has been created, you'll need to add a platform, like so:

$ cd hello
$ cordova platform add --save browser

The act of adding a platform will automatically trigger the first prepare, and when the process is finished, the example code supplied with this template will have been transformed automatically.

Project Structure

This template uses an "external" structure for all transformed assets. This means there will be two directories that contain code:

• www.src — this is where your ES2015+, SCSS files, and all other assets live
• www — after prepare this will store copied assets and transformed files; you should not make changes to this directory

Within www.src, the following structure is assumed:

www.src/
    index.html                          # your index.html file; app's entry point
    js/                                 # JavaScript files that don't need transpilation
    es/                                 # ES2015+ files
        index.js                        # ... App's javascript entry point
    css/                                # CSS stylesheets that don't need transformed
    scss/                               # SCSS stylesheets
        styles.css                      # ... Primary styles; other styles need to be imported
    html/                               # HTML files
    img/                                # Image files
    lib/                                # Library files (perhaps frameworks)
    vendor/                             # Vendor files
 

Transformations

The following transformations occur just prior to the prepare phase.

Type	Entry Point	Output
ES2015	www.src/es/index.js	www/js/bundle.js
SCSS	www.src/scss/styles.scss	www/css/bundle.css
HTML	www.src/*.html	www/*.html
CSS	www.src/css/**/*	www/css/**/*
Images	www.src/img/**/*	www/img/**/*
JavaScript	www.src/js/**/*	www/js/**/*
Lib files	www.src/lib/**/*	www/lib/**/*
Vendor files	www.src/vendor/**/*	www/vendor/**/*

The before prepare hook will transpile your code (and copy files when using the external structure). If an error occurs during this process, you'll be notified. If no error occurs, you should see the something that looks like this:

Starting webpack bundling and transpilation phase...
(node:46414) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
... webpack bundling and babel transpilation phase complete!
Hash: 76ef6d9645fc284a7a9c
Version: webpack 2.2.1
Time: 1977ms
         Asset     Size  Chunks             Chunk Names
  js/bundle.js  22.6 kB       0  [emitted]  main
css/bundle.css  14.8 kB       0  [emitted]  main
    index.html  2.52 kB          [emitted]
  img/logo.png  21.8 kB          [emitted]

The output indicates that four assets were generated. (The paths are relative to your www folder.) The bundle.* files are transformed from your ES2015+ or SCSS files. The other files are files that were copied (this example was from an project using the external structure).

Debug vs Release

The plugin watches for a --release switch on the command line; if it is detected the following occurs:

• Minification is turned on
• Sourcemaps are turned off

If you need to change this behavior, you can override it by copying webpack.config.js in your project root to webpack.release.config.js and making the desired changes, or by requiring webpack.config.js and making any necessary tweaks.

Modifying the configuration files

If you wish to modify webpack.config.js, webpack.release.config.js, or .babelrc, you can. The plugin will not attempt to override their contents, and it won't attempt to overwrite the files on a reinstall. If you need to reset these configuration files, delete them and reinstall the plugin.

Built-in Webpack Loaders

The webpack.config.js files come with some useful loaders:

file pattern	loader	example
*.json; *.json5	json5-loader	import pkg from "../../package.json";
*.html; *.txt	raw-loader	import template from "../templates/list-item.html";
*.png; *.jpg; *.svg	file-loader	import icon from "../img/icon.svg";
*.eot; *.ttf; *.woff; *.woff2	file-loader	import icon from "../img/icon.svg";
—	imports-loader	None; you must specify the rules yourself

If a file pattern you need to import isn't matched with a loader, you can specify the loader directly:

import xml from "raw-loader!../../config.xml";

Built-in asset copying

The following assets will be copied from www.src to www:

*.html
img/**/*
css/**.*
js/**.*
vendor/**.*
lib/**.*
html/**/*

Built-in Module Resolution

The default configurations add the following module resolution paths (relative to project root):

www.src/es/lib
www.src/es/vendor
www.src/lib
www.src/vendor
node_modules

Built-in Aliases

The default configurations add the following aliases, which may be useful in resolving your app's modules:

Alias	Path
$LIB	www.src/lib
Lib	www.src/lib
$VENDOR	www.src/vendor
Vendor	www.src/vendor

License

Apache 2.0.