diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..c13c5f627 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015"] +} diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 000000000..a834cb0d3 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,7 @@ +[production staging] +> 1% +ie 10 + +[development] +last 1 chrome version +last 1 firefox version diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..5850e3267 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# editorconfig.org + +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +trim_trailing_whitespace = true + +[*.js] +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore index c65a39ba7..5a19e8ace 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ node_modules -public -build \ No newline at end of file +dist +coverage \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..43d69febc --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015-2018 Preboot team + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md index 4c993f513..659693b04 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,89 @@ -# Angular 1.x WebPack + Babel workflow +# angularjs-webpack -[![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/preboot/angularjs-webpack/status.svg)](https://david-dm.org/preboot/angular-webpack#info=dependencies) [![devDependency Status](https://david-dm.org/preboot/angularjs-webpack/dev-status.svg)](https://david-dm.org/preboot/angularjs-webpack#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. +A complete, yet simple, starter for AngularJS using Webpack. -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. - -## Features +This workflow serves as a starting point for building AngularJS (1.x) applications using Webpack 2.x. Should be noted that apart from the pre-installed angular package, this workflow is pretty much generic. * Heavily commented webpack configuration with reasonable defaults. -* ES6, and ES7 support with babel.js. +* ES6, and ES7 support with babel. * Source maps included in all builds. * Development server with live reload. -* Production builds with cache busting and asset minification. +* Production builds with cache busting. * Testing environment using karma to run tests and jasmine as the framework. * Code coverage when tests are run. -* No gulp and no grunt, just npm run-scripts. +* No gulp and no grunt, just npm scripts. + +>Warning: Make sure you're using the latest version of Node.js and NPM + +### Quick start -## Installation +> Clone/Download the repo then edit `app.js` inside [`/src/app/app.js`](/src/app/app.js) -To use it, just clone this repo and install the npm dependencies: +```bash +# clone our repo +$ git clone https://github.com/preboot/angularjs-webpack.git my-app -```shell -$ git clone https://github.com/Foxandxss/angular-webpack-workflow my_app -$ cd my_app +# change directory to your app +$ cd my-app + +# install the dependencies with npm $ npm install + +# start the server +$ npm start +``` + +go to [http://localhost:8080](http://localhost:8080) in your browser. + +# Table of Contents + +* [Getting Started](#getting-started) + * [Dependencies](#dependencies) + * [Installing](#installing) + * [Running the app](#running-the-app) + * [Developing](#developing) + * [Testing](#testing) +* [License](#license) + +# Getting Started + +## Dependencies + +What you need to run this app: +* `node` and `npm` (Use [NVM](https://github.com/creationix/nvm)) +* Ensure you're running Node (`v4.1.x`+) and NPM (`2.14.x`+) + +## Installing + +* `fork` this repo +* `clone` your fork +* `npm install` to install all dependencies + +## Running the app + +After you have installed all dependencies you can now run the app with: +```bash +npm start ``` -## Scripts +It will start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The port will be displayed to you as `http://localhost:8080`. + +## Developing + +### Build files -All scripts are run with `npm run [script]`, for example: `npm run test`. +* single run: `npm run build` +* build files and watch: `npm start` -* `build` - generate a minified build to dist folder -* `dev` - start development server, try it by opening `http://localhost:8080/` -* `test` - run all tests -* `test:live` - continuously run unit tests watching for changes +## Testing -See what each script does by looking at the `scripts` section in [package.json](./package.json). +#### 1. Unit Tests -## Example and tutorial +* single run: `npm test` +* live mode (TDD style): `npm run test-watch` -To see how to structure an Angular 1.x application using this workflow, please check [this demo](https://github.com/Foxandxss/GermanWords-ng1-webpack). +# License -Also, there is an article in [angular-tips](http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/) +[MIT](/LICENSE) diff --git a/karma.conf.js b/karma.conf.js index 910638bb8..6c355f33e 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -10,7 +10,7 @@ module.exports = function karmaConfig (config) { reporters: [ // Reference: https://github.com/mlex/karma-spec-reporter // Set reporter to print detailed results to console - 'spec', + 'progress', // Reference: https://github.com/karma-runner/karma-coverage // Output code coverage files @@ -18,7 +18,7 @@ module.exports = function karmaConfig (config) { ], files: [ - // Grab all files in the app folder that contain .test. + // Grab all files in the app folder that contain .spec. 'src/tests.webpack.js' ], @@ -38,15 +38,18 @@ module.exports = function karmaConfig (config) { // Configure code coverage reporter coverageReporter: { - dir: 'build/coverage/', - type: 'html' + dir: 'coverage/', + reporters: [ + {type: 'text-summary'}, + {type: 'html'} + ] }, - webpack: require('./webpack.test'), + webpack: require('./webpack.config'), // Hide webpack build information from output webpackMiddleware: { - noInfo: true + noInfo: 'errors-only' } }); }; diff --git a/package.json b/package.json index 45f2dd10c..6e68269bc 100644 --- a/package.json +++ b/package.json @@ -1,55 +1,56 @@ { "name": "angular-webpack-workflow", - "version": "1.0.0", + "version": "1.1.0", "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", + "build": "webpack --bail --progress --profile", + "server": "webpack-dev-server --history-api-fallback --inline --progress", "test": "karma start", - "test:live": "karma start --auto-watch --no-single-run" + "test-watch": "karma start --auto-watch --no-single-run", + "start": "npm run server" }, "repository": { "type": "git", - "url": "https://github.com/Foxandxss/angular-webpack-workflow.git" + "url": "https://github.com/preboot/angularjs-webpack.git" }, "author": "Jesus Rodriguez", "license": "MIT", "bugs": { - "url": "https://github.com/Foxandxss/angular-webpack-workflow/issues" + "url": "https://github.com/preboot/angularjs-webpack/issues" }, - "babel": { - "stage": 1 - }, - "homepage": "https://github.com/Foxandxss/angular-webpack-workflow", + "homepage": "https://github.com/preboot/angularjs-webpack", "dependencies": { - "angular": "^1.3.16" + "angular": "^1.7.0" }, "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", + "ajv": "^6.4.0", + "angular-mocks": "^1.7.0", + "autoprefixer": "^8.4.1", + "babel-core": "^6.26.3", + "babel-loader": "^7.1.4", + "babel-preset-es2015": "^6.1.18", + "clean-webpack-plugin": "^2.0.2", + "copy-webpack-plugin": "^4.5.1", + "css-loader": "^0.28.11", + "extract-text-webpack-plugin": "2.0.0-beta.5", + "file-loader": "^1.1.11", + "html-webpack-plugin": "^3.2.0", + "istanbul-instrumenter-loader": "^3.0.1", + "jasmine-core": "^3.1.0", + "karma": "^2.0.2", + "karma-coverage": "^1.0.0", + "karma-jasmine": "^1.0.2", + "karma-phantomjs-launcher": "^1.0.0", + "karma-sourcemap-loader": "^0.3.7", + "karma-spec-reporter": "^0.0.32", + "karma-webpack": "^3.0.0", + "node-libs-browser": "^2.1.0", "null-loader": "^0.1.1", - "phantomjs": "^1.9.17", - "postcss-loader": "^0.6.0", + "phantomjs-prebuilt": "^2.1.4", + "postcss-loader": "^2.1.5", "raw-loader": "^0.5.1", - "style-loader": "^0.12.3", - "webpack": "^1.9.11", - "webpack-dev-server": "^1.9.0" + "style-loader": "^0.21.0", + "webpack": "^2.7.0", + "webpack-dev-server": "^2.11.2" } -} \ No newline at end of file +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..3691590b4 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + autoprefixer: { + browsers: ['last 2 versions'] + }, + }, +}; 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/app.html b/src/app/app.html new file mode 100644 index 000000000..29501db8c --- /dev/null +++ b/src/app/app.html @@ -0,0 +1,9 @@ +
+

Hello from Angular !

+ + + +
+ \ No newline at end of file diff --git a/src/app/app.js b/src/app/app.js new file mode 100644 index 000000000..d5e26c84a --- /dev/null +++ b/src/app/app.js @@ -0,0 +1,25 @@ +import angular from 'angular'; + +import '../style/app.css'; + +let app = () => { + return { + template: require('./app.html'), + controller: 'AppCtrl', + controllerAs: 'app' + } +}; + +class AppCtrl { + constructor() { + this.url = 'https://github.com/preboot/angular-webpack'; + } +} + +const MODULE_NAME = 'app'; + +angular.module(MODULE_NAME, []) + .directive('app', app) + .controller('AppCtrl', AppCtrl); + +export default MODULE_NAME; \ No newline at end of file diff --git a/src/app/app.spec.js b/src/app/app.spec.js new file mode 100644 index 000000000..200e50649 --- /dev/null +++ b/src/app/app.spec.js @@ -0,0 +1,20 @@ +import app from './app'; + +describe('app', () => { + + describe('AppCtrl', () => { + let ctrl; + + beforeEach(() => { + angular.mock.module(app); + + angular.mock.inject(($controller) => { + ctrl = $controller('AppCtrl', {}); + }); + }); + + it('should contain the starter url', () => { + expect(ctrl.url).toBe('https://github.com/preboot/angular-webpack'); + }); + }); +}); \ No newline at end of file diff --git a/src/index.html b/src/index.html deleted file mode 100644 index dd402ba96..000000000 --- a/src/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - Angular App - - - - Hello, World - - \ No newline at end of file diff --git a/src/public/img/favicon.ico b/src/public/img/favicon.ico new file mode 100644 index 000000000..8081c7cea Binary files /dev/null and b/src/public/img/favicon.ico differ diff --git a/src/public/img/logo.png b/src/public/img/logo.png new file mode 100644 index 000000000..68fe30784 Binary files /dev/null and b/src/public/img/logo.png differ diff --git a/src/public/index.html b/src/public/index.html new file mode 100644 index 000000000..0e3f09713 --- /dev/null +++ b/src/public/index.html @@ -0,0 +1,14 @@ + + + + + Angular App + + + + + + + + + diff --git a/src/style/app.css b/src/style/app.css new file mode 100644 index 000000000..c0d850e33 --- /dev/null +++ b/src/style/app.css @@ -0,0 +1,22 @@ +/* styles in src/style directory are applied to the whole page */ +body { + background: #0147A7; + color: #fff; +} + +a { + color: #03A9F4; +} + +main { + padding: 1em; + font-family: Arial, Helvetica, sans-serif; + text-align: center; + margin-top: 50px; + display: block; +} + +footer { + text-align: center; + font-size: 0.8em; +} \ No newline at end of file diff --git a/src/tests.webpack.js b/src/tests.webpack.js index fdfe38f1c..4c52ac3d7 100644 --- a/src/tests.webpack.js +++ b/src/tests.webpack.js @@ -4,5 +4,7 @@ import 'angular'; import 'angular-mocks/angular-mocks'; -var testsContext = require.context(".", true, /.test$/); -testsContext.keys().forEach(testsContext); \ No newline at end of file +const context = require.context('./app', true, /\.js$/); + +context.keys().forEach(context); + diff --git a/webpack.build.js b/webpack.build.js deleted file mode 100644 index 538153907..000000000 --- a/webpack.build.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Webpack config for builds - */ -module.exports = require('./webpack.make')({ - BUILD: true, - TEST: false -}); diff --git a/webpack.config.js b/webpack.config.js index 83b3d7ab9..04ec432cc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,223 @@ +'use strict'; + +// Modules +var webpack = require('webpack'); +var autoprefixer = require('autoprefixer'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var CopyWebpackPlugin = require('copy-webpack-plugin'); +var CleanWebpackPlugin = require('clean-webpack-plugin'); + /** - * Webpack config for development + * Env + * Get npm lifecycle event to identify the environment */ -module.exports = require('./webpack.make')({ - BUILD: false, - TEST: false -}); +var ENV = process.env.npm_lifecycle_event; +var isTest = ENV === 'test' || ENV === 'test-watch'; +var isProd = ENV === 'build'; + +module.exports = function makeWebpackConfig() { + /** + * 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 + */ + config.entry = isTest ? void 0 : { + app: './src/app/app.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 + */ + config.output = isTest ? {} : { + // Absolute output directory + path: __dirname + '/dist', + + // Output path from the view of the page + // Uses webpack-dev-server in development + publicPath: '/', + + // Filename for entry points + // Only adds hash in build mode + filename: isProd ? '[name].[hash].js' : '[name].bundle.js', + + // Filename for non-entry points + // Only adds hash in build mode + chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js' + }; + + /** + * Devtool + * Reference: http://webpack.github.io/docs/configuration.html#devtool + * Type of sourcemap to use per build type + */ + if (isTest) { + config.devtool = 'inline-source-map'; + } + else if (isProd) { + config.devtool = 'source-map'; + } + else { + config.devtool = 'eval-source-map'; + } + + /** + * 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 = { + rules: [{ + // 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-loader', + exclude: /node_modules/ + }, { + // 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 + 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. + + loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ + fallbackLoader: 'style-loader', + loader: [ + {loader: 'css-loader', query: {sourceMap: true}}, + {loader: 'postcss-loader'} + ], + }) + }, { + // 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-loader' + }, { + // HTML LOADER + // Reference: https://github.com/webpack/raw-loader + // Allow loading html through js + test: /\.html$/, + loader: 'raw-loader' + }] + }; + + // ISTANBUL LOADER + // https://github.com/deepsweet/istanbul-instrumenter-loader + // Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting + // Skips node_modules and files that end with .spec.js + if (isTest) { + config.module.rules.push({ + enforce: 'pre', + test: /\.js$/, + exclude: [ + /node_modules/, + /\.spec\.js$/ + ], + loader: 'istanbul-instrumenter-loader', + query: { + esModules: true + } + }) + } + + /** + * PostCSS + * Reference: https://github.com/postcss/autoprefixer-core + * Add vendor prefixes to your css + */ + // NOTE: This is now handled in the `postcss.config.js` + // webpack2 has some issues, making the config file necessary + + /** + * Plugins + * Reference: http://webpack.github.io/docs/configuration.html#plugins + * List: http://webpack.github.io/docs/list-of-plugins.html + */ + config.plugins = [ + new CleanWebpackPlugin(), + new webpack.LoaderOptionsPlugin({ + test: /\.scss$/i, + options: { + postcss: { + plugins: [autoprefixer] + } + } + }) + ]; + + // Skip rendering index.html in test mode + if (!isTest) { + // Reference: https://github.com/ampedandwired/html-webpack-plugin + // Render index.html + config.plugins.push( + new HtmlWebpackPlugin({ + template: './src/public/index.html', + inject: 'body' + }), + + // Reference: https://github.com/webpack/extract-text-webpack-plugin + // Extract css files + // Disabled when in test mode or not in build mode + new ExtractTextPlugin({filename: 'css/[name].css', disable: !isProd, allChunks: true}) + ) + } + + // Add build specific plugins + if (isProd) { + 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#uglifyjsplugin + // Minify all javascript, switch loaders to minimizing mode + new webpack.optimize.UglifyJsPlugin(), + + // Copy assets from the public folder + // Reference: https://github.com/kevlened/copy-webpack-plugin + new CopyWebpackPlugin([{ + from: __dirname + '/src/public' + }]) + ) + } + + /** + * 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: './src/public', + stats: 'minimal', + host: '0.0.0.0' + }; + + return config; +}(); diff --git a/webpack.make.js b/webpack.make.js deleted file mode 100644 index 6ede32021..000000000 --- a/webpack.make.js +++ /dev/null @@ -1,227 +0,0 @@ -'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' - } - } - - /** - * 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' - } - } - - /** - * 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 - } - }; - - return config; -}; \ No newline at end of file diff --git a/webpack.test.js b/webpack.test.js deleted file mode 100644 index a67438204..000000000 --- a/webpack.test.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Webpack config for tests - */ -module.exports = require('./webpack.make')({ - BUILD: false, - TEST: true -});