angular-webpack-config
v6.0.1
Published
Shared Webpack config for Angular SPA/Universal development (w/Dll Bundles, Hard Source plugins)
Downloads
265
Readme
angular-webpack-config
Shared Webpack config for Angular SPA/Universal development (w/Dll Bundles, Hard Source plugins)
Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.
Table of contents:
Getting started
Installation
You can install angular-webpack-config
using npm
npm install angular-webpack-config --save
Note: You should have already installed Webpack.
Usage
To use this Webpack configuration preset, you should first have a build-config.json
file, with the following structure:
{
"host": "localhost", // hostname of your app
"port": {
"browser": 1337, // port number (browser bundle)
"server": 8000 // port number (server bundle)
},
"root": ".", // root path (default value recommended)
"paths": { // path to seek for sources (default value recommended)
"src": {
"root": "{{root}}/src",
"client": {
"root": "{{src_root}}/client",
"app": {
"root": "{{src_client_root}}/app"
},
"assets": {
"root": "{{src_client_root}}/assets",
"sass": "{{src_assets_root}}/sass"
}
},
"server": {
"root": "{{src_root}}/server",
"app": "{{src_server_root}}/app"
}
},
"tools" : {
"root": "{{root}}/tools",
"build": "{{tools_root}}/build", // build scripts (gulp, webpack, etc.)
"config": "{{tools_root}}/config", // config files (stylelint, postcss, etc.)
"test": "{{tools_root}}/test" // test scripts (karma, jest, etc.)
},
"public": { // path to extract client bundles (default value recommended)
"root": "{{root}}/public",
"assets": {
"root": "{{public_root}}/assets"
}
},
"server": "{{root}}/.server" // path to extract server bundle (default value recommended)
},
"publicPaths": {
"assets": "assets/", // you can use either `assets/` (relative) or `/assets/` (absolute), or a custom assets path
"images": "assets/img",
"fonts": "assets/fonts"
},
"webpack": {
"devtool": { // source maps for each ENV
"DEV": "cheap-module-source-map",
"PROD": "source-map",
"TEST": "inline-source-map"
},
"bundles": { // here we specify our bundles for DLL plugin
"polyfills": [
"core-js",
{
"name": "zone.js",
"path": "zone.js/dist/zone.js"
},
{
"name": "zone.js",
"path": "zone.js/dist/long-stack-trace-zone.js"
}
],
"server": [
"express",
"debug",
"compression",
"morgan",
"body-parser"
]
}
}
}
Then in your task runner, import the angular-webpack-config
and your build-config.json
:
const webpackConfig = require('angular-webpack-config');
const settings = require('./build-config.json');
Then simply create a root
function to resolve the root path of your app from your task runner:
const root = function(args) {
const ROOT = path.resolve(__dirname, '../..'); // IMPORTANT: adjust per your own directory structure
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [ROOT].concat(args));
};
And finally, execute the webpackConfig
function to generate your bundles:
// SPA bundles
webpackConfig.spa.hmr(root, settings); // DEV env + HMR
webpackConfig.spa.dev(root, settings); // DEV env
webpackConfig.spa.prod(root, settings); // PROD env
// UNIVERSAL bundles
webpackConfig.universal.browser.dev(root, settings); // DEV env (browser)
webpackConfig.universal.server.dev(root, settings); // DEV env (server)
webpackConfig.universal.browser.prod(root, settings); // PROD env (browser)
webpackConfig.universal.server.prod(root, settings); // PROD env (server)
For live demo, please refer to ng-seed/universal repository.
Contributing
If you want to file a bug, contribute some code, or improve documentation, please read up on the following contribution guidelines:
Thanks to
License
The MIT License (MIT)
Copyright (c) 2018 Burak Tasci