diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..bcb6ee8de --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "stage-0"] +} \ No newline at end of file diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..252fbb60e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,21 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] + +# Change these settings to your own preference +indent_style = tab +indent_size = 4 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = false + +[*.md] +trim_trailing_whitespace = false diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 000000000..845c343b3 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,39 @@ +{ + "env": { + "browser": true + }, + "extends": ["standard"], + "parser": "babel-eslint", + "rules": { + "eol-last": 0, + "eqeqeq": [1, "smart"], + "indent" : [2, "tab", {"SwitchCase": 1 }], + "no-multiple-empty-lines": [2, {"max": 2}], + "no-unused-vars": [1, "all"], + "quotes": [0, "single"], + "semi": [2, "always"], + "space-before-function-paren": [2, "never"], + "spaced-comment": [0, "always"], + "radix": 0 + }, + "globals": { + "angular": true, + "_": true, + "moment": true, + "$": true, + "jQuery": true, + "d3": true, + "describe": true, + "xdescribe": true, + "expect": true, + "spyOn": true, + "beforeEach": true, + "afterEach": true, + "inject": true, + "it": true, + "jasmine": true + }, + "plugins": [ + "jasmine" + ] +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index c65a39ba7..eff38d5e1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules public -build \ No newline at end of file +build +.idea \ No newline at end of file diff --git a/README.md b/README.md index 4c993f513..b1d08789c 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,17 @@ -# Angular 1.x WebPack + Babel workflow +# Angular 1.5 ES2015 WebPack + Babel workflow -[![Dependency Status](https://david-dm.org/Foxandxss/angular-webpack-workflow/status.svg)](https://david-dm.org/Foxandxss/angular-webpack-workflow#info=dependencies) [![devDependency Status](https://david-dm.org/Foxandxss/angular-webpack-workflow/dev-status.svg)](https://david-dm.org/Foxandxss/angular-webpack-workflow#info=devDependencies) +[![Dependency Status](https://david-dm.org/mike-allison/angular-webpack-workflow/status.svg)](https://david-dm.org/mike-allison/angular-webpack-workflow#info=dependencies) [![devDependency Status](https://david-dm.org/mike-allison/angular-webpack-workflow/dev-status.svg)](https://david-dm.org/mike-allison/angular-webpack-workflow#info=devDependencies) -This workflow serves as a starting point for building Angular 1.x applications using WebPack. Should be noted that apart from the pre-installed angular package, this workflow is pretty much generic. - -It is a direct port of the amazing [react workflow](https://github.com/cesarandreu/web-app) of [Cesar Andreu](https://github.com/cesarandreu). All the credits goes for him. +This workflow serves as a starting point for building Angular 1.5 applications using WebPack. ## Features * Heavily commented webpack configuration with reasonable defaults. * ES6, and ES7 support with babel.js. +* Pre-configured CSS/Sass support (including bootstrap/fontawesome). +* NPM and Bower fallback support. * Source maps included in all builds. +* Automatic dependency annotation. * Development server with live reload. * Production builds with cache busting and asset minification. * Testing environment using karma to run tests and jasmine as the framework. @@ -22,7 +23,7 @@ It is a direct port of the amazing [react workflow](https://github.com/cesarandr To use it, just clone this repo and install the npm dependencies: ```shell -$ git clone https://github.com/Foxandxss/angular-webpack-workflow my_app +$ git clone https://github.com/mike-allison/angular-webpack-workflow my_app $ cd my_app $ npm install ``` @@ -32,14 +33,11 @@ $ npm install All scripts are run with `npm run [script]`, for example: `npm run test`. * `build` - generate a minified build to dist folder -* `dev` - start development server, try it by opening `http://localhost:8080/` +* `start` - start development server, try it by opening `http://localhost:8080/` * `test` - run all tests * `test:live` - continuously run unit tests watching for changes See what each script does by looking at the `scripts` section in [package.json](./package.json). -## Example and tutorial - -To see how to structure an Angular 1.x application using this workflow, please check [this demo](https://github.com/Foxandxss/GermanWords-ng1-webpack). - -Also, there is an article in [angular-tips](http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/) +## Additional credits +Initial version was a direct fork of https://github.com/Foxandxss/angular-webpack-workflow \ No newline at end of file diff --git a/package.json b/package.json index 45f2dd10c..9ed64d20f 100644 --- a/package.json +++ b/package.json @@ -4,52 +4,69 @@ "description": "A workflow for Angular made with Webpack", "scripts": { "build": "webpack --config webpack.build.js --bail -p", - "dev": "webpack-dev-server --history-api-fallback --inline --progress", + "start": "webpack --progress --config webpack.config.js --colors --watch", "test": "karma start", "test:live": "karma start --auto-watch --no-single-run" }, "repository": { "type": "git", - "url": "https://github.com/Foxandxss/angular-webpack-workflow.git" + "url": "https://github.com/mike-allison/angular-webpack-workflow.git" }, - "author": "Jesus Rodriguez", + "author": "Mike Allison", "license": "MIT", "bugs": { - "url": "https://github.com/Foxandxss/angular-webpack-workflow/issues" + "url": "https://github.com/mike-allison/angular-webpack-workflow/issues" }, "babel": { "stage": 1 }, - "homepage": "https://github.com/Foxandxss/angular-webpack-workflow", + "homepage": "https://github.com/mike-allison/angular-webpack-workflow", "dependencies": { - "angular": "^1.3.16" + "angular": "^1.5.8" }, "devDependencies": { - "angular-mocks": "^1.4.1", - "autoprefixer": "^6.0.2", - "babel-core": "^5.5.8", - "babel-loader": "^5.1.4", - "babel-runtime": "^5.5.8", - "css-loader": "^0.18.0", - "extract-text-webpack-plugin": "^0.8.2", - "file-loader": "^0.8.4", - "html-webpack-plugin": "^1.5.2", - "isparta-instrumenter-loader": "^0.2.1", - "jasmine-core": "^2.3.4", - "karma": "^0.13.2", - "karma-coverage": "^0.5.2", - "karma-jasmine": "^0.3.5", - "karma-phantomjs-launcher": "^0.2.0", - "karma-sourcemap-loader": "^0.3.5", - "karma-spec-reporter": "0.0.20", - "karma-webpack": "^1.5.1", - "node-libs-browser": "^0.5.2", + "angular-mocks": "^1.5.8", + "autoprefixer": "^6.4.1", + "babel-core": "^6.14.0", + "babel-eslint": "^6.0.4", + "babel-loader": "^6.2.5", + "babel-runtime": "^6.11.6", + "babel-preset-es2015": "^6.1.18", + "babel-preset-stage-0": "^6.1.18", + "browser-sync": "^2.15.0", + "browser-sync-webpack-plugin": "^1.1.2", + "connect-modrewrite": "^0.9.0", + "css-loader": "^0.25.0", + "eslint": "^3.4.0", + "eslint-config-standard": "^6.0.0", + "eslint-loader": "^1.1.0", + "eslint-plugin-jasmine": "^1.5.0", + "eslint-plugin-promise": "^2.0.1", + "eslint-plugin-standard": "^2.0.0", + "extract-text-webpack-plugin": "^1.0.1", + "file-loader": "^0.9.0", + "html-loader": "^0.4.3", + "html-webpack-plugin": "^2.22.0", + "isparta-instrumenter-loader": "^1.0.1", + "jasmine-core": "^2.5.0", + "karma": "^1.2.0", + "karma-coverage": "^1.1.1", + "karma-jasmine": "^1.0.2", + "karma-phantomjs-launcher": "^1.0.2", + "karma-sourcemap-loader": "^0.3.7", + "karma-spec-reporter": "0.0.26", + "karma-webpack": "^1.8.0", + "ng-annotate-loader": "^0.1.1", + "node-libs-browser": "^1.0.0", + "node-sass": "^3.9.3", "null-loader": "^0.1.1", - "phantomjs": "^1.9.17", - "postcss-loader": "^0.6.0", + "phantomjs-prebuilt": "^2.1.7", + "postcss-loader": "^0.11.1", "raw-loader": "^0.5.1", - "style-loader": "^0.12.3", - "webpack": "^1.9.11", - "webpack-dev-server": "^1.9.0" + "sass-loader": "^4.0.1", + "style-loader": "^0.13.1", + "url-loader": "^0.5.7", + "webpack": "^1.13.2", + "webpack-dev-server": "^1.15.1" } -} \ No newline at end of file +} diff --git a/src/app.js b/src/app.js deleted file mode 100644 index 0300163f5..000000000 --- a/src/app.js +++ /dev/null @@ -1,3 +0,0 @@ -import angular from 'angular'; - -angular.module('app', []); \ No newline at end of file diff --git a/src/app.module.js b/src/app.module.js new file mode 100644 index 000000000..73fd97e0a --- /dev/null +++ b/src/app.module.js @@ -0,0 +1,5 @@ +import angular from 'angular'; + +import home from './home/home.component'; + +export default angular.module('app', [home]).name; \ No newline at end of file diff --git a/src/home/home.component.js b/src/home/home.component.js new file mode 100644 index 000000000..991dc0c11 --- /dev/null +++ b/src/home/home.component.js @@ -0,0 +1,13 @@ +class HomeController { + constructor() { + this.welcomeMessage = 'Hello World'; + } +} +const Home = { + template: require('./home.html'), + controller: HomeController +}; + +export default angular.module('app.home', []) + .component('home', Home) + .name; \ No newline at end of file diff --git a/src/home/home.html b/src/home/home.html new file mode 100644 index 000000000..c3564ee76 --- /dev/null +++ b/src/home/home.html @@ -0,0 +1,3 @@ +
+ {{$ctrl.welcomeMessage}} +
\ No newline at end of file diff --git a/src/index.html b/src/index.html index dd402ba96..dfc4b318b 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,6 @@ - Hello, World + \ No newline at end of file diff --git a/webpack.make.js b/webpack.make.js index 6ede32021..b25aa70a5 100644 --- a/webpack.make.js +++ b/webpack.make.js @@ -1,227 +1,283 @@ 'use strict'; // Modules -var webpack = require('webpack'); -var autoprefixer = require('autoprefixer'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); - -module.exports = function makeWebpackConfig (options) { - /** - * Environment type - * BUILD is for generating minified builds - * TEST is for generating test builds - */ - var BUILD = !!options.BUILD; - var TEST = !!options.TEST; - - /** - * Config - * Reference: http://webpack.github.io/docs/configuration.html - * This is the object where all configuration gets set - */ - var config = {}; - - /** - * Entry - * Reference: http://webpack.github.io/docs/configuration.html#entry - * Should be an empty object if it's generating a test build - * Karma will set this when it's a test build - */ - if (TEST) { - config.entry = {} - } else { - config.entry = { - app: './src/app.js' +var webpack = require('webpack'), + autoprefixer = require('autoprefixer'), + HtmlWebpackPlugin = require('html-webpack-plugin'), + ExtractTextPlugin = require('extract-text-webpack-plugin'), + path = require('path'), + modRewrite = require('connect-modrewrite'), + BrowserSyncPlugin = require('browser-sync-webpack-plugin'); + +module.exports = function makeWebpackConfig(options) { + /** + * Environment type + * BUILD is for generating minified builds + * TEST is for generating test builds + */ + var BUILD = !!options.BUILD; + var TEST = !!options.TEST; + + /** + * Config + * Reference: http://webpack.github.io/docs/configuration.html + * This is the object where all configuration gets set + */ + var config = {}; + + /** + * Entry + * Reference: http://webpack.github.io/docs/configuration.html#entry + * Should be an empty object if it's generating a test build + * Karma will set this when it's a test build + */ + if (TEST) { + config.entry = {} + } else { + config.entry = { + app: './src/app.module.js' + } + } + + /** + * Output + * Reference: http://webpack.github.io/docs/configuration.html#output + * Should be an empty object if it's generating a test build + * Karma will handle setting it up for you when it's a test build + */ + if (TEST) { + config.output = {} + } else { + config.output = { + // Absolute output directory + path: __dirname + '/public', + + // Output path from the view of the page + // Uses webpack-dev-server in development + publicPath: BUILD ? '/' : 'http://localhost:8080/', + + // Filename for entry points + // Only adds hash in build mode + filename: BUILD ? '[name].[hash].js' : '[name].bundle.js', + + // Filename for non-entry points + // Only adds hash in build mode + chunkFilename: BUILD ? '[name].[hash].js' : '[name].bundle.js' + } + } + + /** + * Resolve + * Reference: http://webpack.github.io/docs/configuration.html#resolve + * Sets root to node_modules, but allows backup modules from bower_components + */ + config.resolve = { + root: [path.join(__dirname, "node_modules")], + fallback: [path.join(__dirname, "bower_components")] + }; + + /** + * Devtool + * Reference: http://webpack.github.io/docs/configuration.html#devtool + * Type of sourcemap to use per build type + */ + if (TEST) { + config.devtool = 'inline-source-map'; + } else if (BUILD) { + config.devtool = 'source-map'; + } else { + config.devtool = 'eval'; + } + + /** + * Loaders + * Reference: http://webpack.github.io/docs/configuration.html#module-loaders + * List: http://webpack.github.io/docs/list-of-loaders.html + * This handles most of the magic responsible for converting modules + */ + + // Initialize module + config.module = { + preLoaders: [], + loaders: [{ + // JS LOADER + // Reference: https://github.com/babel/babel-loader + // Transpile .js files using babel-loader + // Compiles ES6 and ES7 into ES5 code + test: /\.js$/, + loaders: ['ng-annotate', 'babel'], + exclude: /node_modules|bower_components/ + },{ + // HTML LOADER + // Reference: https://github.com/WearyMonkey/ngtemplate-loader + // Allow loading html through js + test: /\.html$/, + loader: "html" + },{ + // ASSET LOADER + // Reference: https://github.com/webpack/file-loader + // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output + // Rename the file using the asset hash + // Pass along the updated reference to your code + // You can add here any file extension you want to get copied to your output + test: /\.(png|jpg|jpeg|gif)$/, + loader: 'file' + },{ + test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "url-loader?limit=10000&minetype=application/font-woff" + },{ + test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "file-loader" + }] + }; + + // ISPARTA LOADER + // Reference: https://github.com/ColCh/isparta-instrumenter-loader + // Instrument JS files with Isparta for subsequent code coverage reporting + // Skips node_modules and files that end with .test.js + if (TEST) { + config.module.preLoaders.push({ + test: /\.js$/, + exclude: [ + /node_modules/, + /\.test\.js$/ + ], + loader: 'isparta-instrumenter' + }) } - } - - /** - * Output - * Reference: http://webpack.github.io/docs/configuration.html#output - * Should be an empty object if it's generating a test build - * Karma will handle setting it up for you when it's a test build - */ - if (TEST) { - config.output = {} - } else { - config.output = { - // Absolute output directory - path: __dirname + '/public', - - // Output path from the view of the page - // Uses webpack-dev-server in development - publicPath: BUILD ? '/' : 'http://localhost:8080/', - - // Filename for entry points - // Only adds hash in build mode - filename: BUILD ? '[name].[hash].js' : '[name].bundle.js', - - // Filename for non-entry points - // Only adds hash in build mode - chunkFilename: BUILD ? '[name].[hash].js' : '[name].bundle.js' + + if(!TEST) { + // CSS LOADER + // Reference: https://github.com/webpack/css-loader + // Allow loading css through js + // + // Reference: https://github.com/postcss/postcss-loader + // Postprocess your css with PostCSS plugins + var cssLoader = { + test: /\.css$/, + // Reference: https://github.com/webpack/extract-text-webpack-plugin + // Extract css files in production builds + // + // Reference: https://github.com/webpack/style-loader + // Use style-loader in development for hot-loading + loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss') + }; + + // SASS LOADER + // Reference: https://github.com/jtangelder/sass-loader + // Allow loading inline sass through js + // + var sassLoader = { + test: /\.scss$/, + loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass?sourceMap&sourceMapContents&includePaths[]=' + encodeURIComponent(path.resolve(process.cwd(), "node_modules"))) + }; + if (BUILD) { + sassLoader.loader = ExtractTextPlugin.extract('style', 'css!postcss!sass?includePaths[]=' + encodeURIComponent(path.resolve(process.cwd(), "node_modules"))); + } + // Add cssLoader to the loader list + config.module.loaders.push(cssLoader); + config.module.loaders.push(sassLoader); + } else { + // Skip loading styles in test mode + // Reference: https://github.com/webpack/null-loader + // Return an empty module + var nullLoader = { + test: /\.css$|\.scss$/, + // Reference: https://github.com/webpack/style-loader + // Use style-loader in development for hot-loading + loader: 'null' + }; + config.module.loaders.push(nullLoader); } - } - - /** - * Devtool - * Reference: http://webpack.github.io/docs/configuration.html#devtool - * Type of sourcemap to use per build type - */ - if (TEST) { - config.devtool = 'inline-source-map'; - } else if (BUILD) { - config.devtool = 'source-map'; - } else { - config.devtool = 'eval'; - } - - /** - * Loaders - * Reference: http://webpack.github.io/docs/configuration.html#module-loaders - * List: http://webpack.github.io/docs/list-of-loaders.html - * This handles most of the magic responsible for converting modules - */ - - // Initialize module - config.module = { - preLoaders: [], - loaders: [{ - // JS LOADER - // Reference: https://github.com/babel/babel-loader - // Transpile .js files using babel-loader - // Compiles ES6 and ES7 into ES5 code - test: /\.js$/, - loader: 'babel?optional[]=runtime', - exclude: /node_modules/ - }, { - // ASSET LOADER - // Reference: https://github.com/webpack/file-loader - // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output - // Rename the file using the asset hash - // Pass along the updated reference to your code - // You can add here any file extension you want to get copied to your output - test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, - loader: 'file' - }, { - // HTML LOADER - // Reference: https://github.com/webpack/raw-loader - // Allow loading html through js - test: /\.html$/, - loader: 'raw' - }] - }; - - // ISPARTA LOADER - // Reference: https://github.com/ColCh/isparta-instrumenter-loader - // Instrument JS files with Isparta for subsequent code coverage reporting - // Skips node_modules and files that end with .test.js - if (TEST) { - config.module.preLoaders.push({ - test: /\.js$/, - exclude: [ - /node_modules/, - /\.test\.js$/ - ], - loader: 'isparta-instrumenter' - }) - } - - // CSS LOADER - // Reference: https://github.com/webpack/css-loader - // Allow loading css through js - // - // Reference: https://github.com/postcss/postcss-loader - // Postprocess your css with PostCSS plugins - var cssLoader = { - test: /\.css$/, - // Reference: https://github.com/webpack/extract-text-webpack-plugin - // Extract css files in production builds - // - // Reference: https://github.com/webpack/style-loader - // Use style-loader in development for hot-loading - loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss') - }; - - // Skip loading css in test mode - if (TEST) { - // Reference: https://github.com/webpack/null-loader - // Return an empty module - cssLoader.loader = 'null' - } - - // Add cssLoader to the loader list - config.module.loaders.push(cssLoader); - - /** - * PostCSS - * Reference: https://github.com/postcss/autoprefixer-core - * Add vendor prefixes to your css - */ - config.postcss = [ - autoprefixer({ - browsers: ['last 2 version'] - }) - ]; - - /** - * Plugins - * Reference: http://webpack.github.io/docs/configuration.html#plugins - * List: http://webpack.github.io/docs/list-of-plugins.html - */ - config.plugins = [ - // Reference: https://github.com/webpack/extract-text-webpack-plugin - // Extract css files - // Disabled when in test mode or not in build mode - new ExtractTextPlugin('[name].[hash].css', { - disable: !BUILD || TEST - }) - ]; - - // Skip rendering index.html in test mode - if (!TEST) { - // Reference: https://github.com/ampedandwired/html-webpack-plugin - // Render index.html - config.plugins.push( - new HtmlWebpackPlugin({ - template: './src/index.html', - inject: 'body', - minify: BUILD - }) - ) - } - - // Add build specific plugins - if (BUILD) { - config.plugins.push( - // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin - // Only emit files when there are no errors - new webpack.NoErrorsPlugin(), - - // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin - // Dedupe modules in the output - new webpack.optimize.DedupePlugin(), - - // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin - // Minify all javascript, switch loaders to minimizing mode - new webpack.optimize.UglifyJsPlugin() - ) - } - - /** - * Dev server configuration - * Reference: http://webpack.github.io/docs/configuration.html#devserver - * Reference: http://webpack.github.io/docs/webpack-dev-server.html - */ - config.devServer = { - contentBase: './public', - stats: { - modules: false, - cached: false, - colors: true, - chunk: false + + /** + * PostCSS + * Reference: https://github.com/postcss/autoprefixer-core + * Add vendor prefixes to your css + */ + config.postcss = [ + autoprefixer({ + browsers: ['last 2 version'] + }) + ]; + + /** + * Plugins + * Reference: http://webpack.github.io/docs/configuration.html#plugins + * List: http://webpack.github.io/docs/list-of-plugins.html + */ + config.plugins = [ + // Reference: https://github.com/webpack/extract-text-webpack-plugin + // Extract css files + // Disabled when in test mode or not in build mode + new ExtractTextPlugin('[name].[hash].css', { + disable: !BUILD || TEST + }) + ]; + + if (!TEST && !BUILD) { + config.eslint = { + parser: 'babel-eslint' + }; + config.module.loaders.push({ + test: /\.js$/, + exclude: /node_modules|bower_components|vendor/, + loaders: ['eslint'] + }); + } + + // Skip rendering index.html in test mode + if (!TEST) { + // Reference: https://github.com/ampedandwired/html-webpack-plugin + // Render index.html + config.plugins.push( + new HtmlWebpackPlugin({ + template: './src/index.html', + inject: 'body', + minify: BUILD + }), + new BrowserSyncPlugin({ + host: 'localhost', + port: 8080, + server: { baseDir: ['public'] }, + middleware: [ + modRewrite(['^[^\\.]*$ /index.html [L]']) + ] + }) + ) + } + + // Add build specific plugins + if (BUILD) { + config.plugins.push( + // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin + // Only emit files when there are no errors + new webpack.NoErrorsPlugin(), + + // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin + // Dedupe modules in the output + new webpack.optimize.DedupePlugin(), + + // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin + // Minify all javascript, switch loaders to minimizing mode + new webpack.optimize.UglifyJsPlugin() + ) } - }; - return config; + /** + * Dev server configuration + * Reference: http://webpack.github.io/docs/configuration.html#devserver + * Reference: http://webpack.github.io/docs/webpack-dev-server.html + */ + config.devServer = { + contentBase: './public', + stats: { + modules: false, + cached: false, + colors: true, + chunk: false + } + }; + + return config; }; \ No newline at end of file