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/LICENSE b/LICENSE index b06f77326..43d69febc 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015-2016 Preboot team +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 diff --git a/README.md b/README.md index 033ce50bf..659693b04 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# angular-webpack +# angularjs-webpack -[![Dependency Status](https://david-dm.org/preboot/angular-webpack/status.svg)](https://david-dm.org/preboot/angular-webpack#info=dependencies) [![devDependency Status](https://david-dm.org/preboot/angular-webpack/dev-status.svg)](https://david-dm.org/preboot/angular-webpack#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) -A complete, yet simple, starter for Angular using Webpack. +A complete, yet simple, starter for AngularJS using Webpack. -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. +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. @@ -23,7 +23,7 @@ This workflow serves as a starting point for building Angular 1.x applications u ```bash # clone our repo -$ git clone https://github.com/preboot/angular-webpack.git my-app +$ git clone https://github.com/preboot/angularjs-webpack.git my-app # change directory to your app $ cd my-app @@ -75,7 +75,7 @@ It will start a local server using `webpack-dev-server` which will watch, build ### Build files * single run: `npm run build` -* build files and watch: `npm run watch` +* build files and watch: `npm start` ## Testing diff --git a/package.json b/package.json index bd8f95c75..6e68269bc 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "angular-webpack-workflow", - "version": "1.0.0", + "version": "1.1.0", "description": "A workflow for Angular made with Webpack", "scripts": { - "build": "rimraf dist && webpack --bail --progress --profile", + "build": "webpack --bail --progress --profile", "server": "webpack-dev-server --history-api-fallback --inline --progress", "test": "karma start", "test-watch": "karma start --auto-watch --no-single-run", @@ -11,45 +11,46 @@ }, "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" }, - "homepage": "https://github.com/Foxandxss/angular-webpack-workflow", + "homepage": "https://github.com/preboot/angularjs-webpack", "dependencies": { - "angular": "^1.5.0" + "angular": "^1.7.0" }, "devDependencies": { - "angular-mocks": "^1.5.0", - "autoprefixer": "^6.0.3", - "babel-core": "^6.2.1", - "babel-loader": "^6.2.0", + "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", - "copy-webpack-plugin": "^3.0.1", - "css-loader": "^0.23.0", - "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.9.0", - "html-webpack-plugin": "^2.7.1", - "isparta-loader": "^2.0.0", - "jasmine-core": "^2.3.4", - "karma": "^1.1.0", + "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.26", - "karma-webpack": "^1.7.0", - "node-libs-browser": "^1.0.0", + "karma-spec-reporter": "^0.0.32", + "karma-webpack": "^3.0.0", + "node-libs-browser": "^2.1.0", "null-loader": "^0.1.1", "phantomjs-prebuilt": "^2.1.4", - "postcss-loader": "^0.9.1", + "postcss-loader": "^2.1.5", "raw-loader": "^0.5.1", - "rimraf": "^2.5.1", - "style-loader": "^0.13.0", - "webpack": "^1.12.13", - "webpack-dev-server": "^1.14.1" + "style-loader": "^0.21.0", + "webpack": "^2.7.0", + "webpack-dev-server": "^2.11.2" } } 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/webpack.config.js b/webpack.config.js index 519c3bb30..04ec432cc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,6 +6,7 @@ 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'); /** * Env @@ -15,7 +16,7 @@ var ENV = process.env.npm_lifecycle_event; var isTest = ENV === 'test' || ENV === 'test-watch'; var isProd = ENV === 'build'; -module.exports = function makeWebpackConfig () { +module.exports = function makeWebpackConfig() { /** * Config * Reference: http://webpack.github.io/docs/configuration.html @@ -29,7 +30,7 @@ module.exports = function makeWebpackConfig () { * 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 ? {} : { + config.entry = isTest ? void 0 : { app: './src/app/app.js' }; @@ -45,7 +46,7 @@ module.exports = function makeWebpackConfig () { // Output path from the view of the page // Uses webpack-dev-server in development - publicPath: isProd ? '/' : 'http://localhost:8080/', + publicPath: '/', // Filename for entry points // Only adds hash in build mode @@ -63,9 +64,11 @@ module.exports = function makeWebpackConfig () { */ if (isTest) { config.devtool = 'inline-source-map'; - } else if (isProd) { + } + else if (isProd) { config.devtool = 'source-map'; - } else { + } + else { config.devtool = 'eval-source-map'; } @@ -78,14 +81,13 @@ module.exports = function makeWebpackConfig () { // Initialize module config.module = { - preLoaders: [], - loaders: [{ + 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: 'babel-loader', exclude: /node_modules/ }, { // CSS LOADER @@ -100,7 +102,14 @@ module.exports = function makeWebpackConfig () { // // Reference: https://github.com/webpack/style-loader // Use style-loader in development. - loader: isTest ? 'null' : ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader') + + 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 @@ -109,28 +118,32 @@ module.exports = function makeWebpackConfig () { // 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: 'file-loader' }, { // HTML LOADER // Reference: https://github.com/webpack/raw-loader // Allow loading html through js test: /\.html$/, - loader: 'raw' + loader: 'raw-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 + // 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.preLoaders.push({ + config.module.rules.push({ + enforce: 'pre', test: /\.js$/, exclude: [ /node_modules/, /\.spec\.js$/ ], - loader: 'isparta-loader' + loader: 'istanbul-instrumenter-loader', + query: { + esModules: true + } }) } @@ -139,18 +152,25 @@ module.exports = function makeWebpackConfig () { * Reference: https://github.com/postcss/autoprefixer-core * Add vendor prefixes to your css */ - config.postcss = [ - autoprefixer({ - browsers: ['last 2 version'] - }) - ]; + // 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 = []; + config.plugins = [ + new CleanWebpackPlugin(), + new webpack.LoaderOptionsPlugin({ + test: /\.scss$/i, + options: { + postcss: { + plugins: [autoprefixer] + } + } + }) + ]; // Skip rendering index.html in test mode if (!isTest) { @@ -165,7 +185,7 @@ module.exports = function makeWebpackConfig () { // 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: !isProd}) + new ExtractTextPlugin({filename: 'css/[name].css', disable: !isProd, allChunks: true}) ) } @@ -176,10 +196,6 @@ module.exports = function makeWebpackConfig () { // 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(), @@ -199,7 +215,8 @@ module.exports = function makeWebpackConfig () { */ config.devServer = { contentBase: './src/public', - stats: 'minimal' + stats: 'minimal', + host: '0.0.0.0' }; return config;