diff --git a/LICENSE b/LICENSE index b06f77326..fad004c8a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015-2016 Preboot team +Copyright (c) 2015-2017 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 99e927ea9..11b5850b0 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ A complete, yet simple, starter for Angular 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 Angular 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. diff --git a/package.json b/package.json index 7f77b3be7..ff1992462 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "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", @@ -28,9 +28,9 @@ "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.1.18", - "copy-webpack-plugin": "^4.0.1", - "css-loader": "^0.23.0", - "extract-text-webpack-plugin": "^1.0.1", + "copy-webpack-plugin": "4.0.1", + "css-loader": "0.26.1", + "extract-text-webpack-plugin": "2.0.0-beta.5", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.7.1", "istanbul-instrumenter-loader": "^1.0.0", @@ -41,15 +41,15 @@ "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": "^2.0.0", + "karma-webpack": "2.0.1", + "node-libs-browser": "2.0.0", "null-loader": "^0.1.1", "phantomjs-prebuilt": "^2.1.4", - "postcss-loader": "^1.1.1", + "postcss-loader": "1.2.2", "raw-loader": "^0.5.1", "rimraf": "^2.5.1", "style-loader": "^0.13.0", - "webpack": "^1.12.13", - "webpack-dev-server": "^1.14.1" + "webpack": "2.2.0", + "webpack-dev-server": "2.2.0" } } 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 7fbeb57ac..dffe862f6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,7 +15,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 @@ -63,9 +63,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 +80,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 +101,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' : 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,13 +117,13 @@ 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' }] }; @@ -124,7 +132,8 @@ module.exports = function makeWebpackConfig () { // Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting // Skips node_modules and files that end with .test if (isTest) { - config.module.preLoaders.push({ + config.module.rules.push({ + enforce: 'pre', test: /\.js$/, exclude: [ /node_modules/, @@ -142,18 +151,24 @@ 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 webpack.LoaderOptionsPlugin({ + test: /\.scss$/i, + options: { + postcss: { + plugins: [autoprefixer] + } + } + }) + ]; // Skip rendering index.html in test mode if (!isTest) { @@ -168,7 +183,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}) ) }