build(dependency): modify for webpack 2 breaking changes

Sanji-IO · Sep 22, 2016 · 0e347a5 · 0e347a5
1 parent 2528e71
commit 0e347a5
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 94 deletions.
diff --git a/app/component/auth.interceptor.js b/app/component/auth.interceptor.js
@@ -4,7 +4,7 @@ export default function($q, session) {
     // Add authorization token to headers
     request: function(config) {
       config.headers = config.headers || {};
-      let token = session.get(session.getTokenKey());
+      const token = session.get(session.getTokenKey());
       if (token) {
         config.headers[session.getTokenHeader()] = 'Bearer ' + token;
       }

diff --git a/app/component/auth.spec.js b/app/component/auth.spec.js
@@ -34,7 +34,7 @@ describe('Provider: authProvider', () => {
   });
 
   it('#configure() should extend config', () => {
-    let config = {
+    const config = {
       roles: {
         admin: 'admin',
         user:  'user'
@@ -46,7 +46,7 @@ describe('Provider: authProvider', () => {
   });
 
   it('#$get(<...injects>) should return auth service instance', () => {
-    let obj = authProvider.$get($q, rest, authService, session);
+    const obj = authProvider.$get($q, rest, authService, session);
     expect(obj.get).to.be.a('function');
     expect(obj.login).to.be.a('function');
     expect(obj.isAuthenticated).to.be.a('function');
@@ -63,14 +63,13 @@ describe('Provider: authProvider', () => {
     });
 
     it('should return config without token header', () => {
-      let config = authInterceptor.request({});
+      const config = authInterceptor.request({});
       expect(config.headers).to.be.empty;
     });
 
     it('should return config with token header', () => {
-      let config;
       session.create('sdfwersdf');
-      config = authInterceptor.request({});
+      const config = authInterceptor.request({});
       expect(config.headers).to.eql({Authorization: 'Bearer sdfwersdf'});
     });
   });
@@ -85,7 +84,7 @@ describe('Provider: authProvider', () => {
     });
 
     it('#login(<uri>, <credentials>) should check user login credentials', function(done) {
-      let fakeData = { token: '1234567890zxcvbnm' };
+      const fakeData = { token: '1234567890zxcvbnm' };
       $httpBackend.expectPOST('/auth/local', {
         username: 'admin',
         password: 'xxdeswersdf'

diff --git a/package.json b/package.json
@@ -13,65 +13,67 @@
   },
   "scripts": {
     "validate": "npm run test:once && npm run check-coverage",
-    "test": "NODE_ENV=test BABEL_ENV=test karma start",
-    "test:once": "BABEL_ENV=test karma start",
-    "prebuild": "rm -rf dist && mkdir dist",
-    "build": "NODE_ENV=production webpack --config webpack.build.js --display-modules",
+    "test": "cross-env NODE_ENV=test BABEL_ENV=test karma start",
+    "test:once": "cross-env BABEL_ENV=test karma start",
+    "prebuild": "rimraf dist && mkdir dist",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.build.js --display-modules",
     "commit": "git-cz",
     "check-coverage": "istanbul check-coverage --statements 75 --branches 75 --functions 75 --lines 75",
     "report-coverage": "cat ./coverage/lcov.info | codecov",
-    "start": "NODE_ENV=development node server/dev-server.js",
+    "start": "cross-env NODE_ENV=development node server/dev-server.js",
     "publish-latest": "publish-latest",
     "semantic-release": "semantic-release pre && npm publish && npm run publish-latest && semantic-release post"
   },
   "devDependencies": {
-    "angular-material": "~1.0.2",
     "angular-animate": "~1.5.0",
     "angular-aria": "~1.5.0",
+    "angular-material": "~1.1.0",
     "angular-mocks": "~1.5.0",
-    "autoprefixer-loader": "~3.2.0",
+    "autoprefixer": "^6.4.0",
     "babel-core": "^6.0.0",
     "babel-eslint": "^6.0.4",
     "babel-loader": "^6.0.0",
-    "babel-plugin-lodash": "^3.2.4",
     "babel-plugin-__coverage__": "^11.0.0",
-    "babel-preset-es2015": "~6.9.0",
+    "babel-plugin-lodash": "^3.2.4",
+    "babel-preset-es2015": "^6.9.0",
     "codecov.io": "^0.1.6",
     "commitizen": "^2.8.0",
-    "css-loader": "~0.23.1",
+    "cross-env": "~2.0.1",
+    "css-loader": "^0.24.0",
     "cz-conventional-changelog": "^1.1.5",
-    "eslint": "^2.0.0",
+    "eslint": "^3.3.0",
     "eslint-loader": "^1.3.0",
     "file-loader": "~0.9.0",
     "ghooks": "^1.2.0",
     "html-webpack-plugin": "~2.22.0",
     "istanbul": "~0.4.2",
     "jquery": "~2.2.0",
-    "karma": "~0.13.19",
+    "karma": "~1.2.0",
     "karma-chai-plugins": "~0.7.0",
-    "karma-chrome-launcher": "~1.0.1",
+    "karma-chrome-launcher": "~2.0.0",
     "karma-coverage": "~1.1.0",
     "karma-mocha": "~1.1.1",
     "karma-sourcemap-loader": "~0.3.7",
     "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "~1.7.0",
-    "lodash-webpack-plugin": "^0.9.2",
-    "mocha": "~2.5.3",
-    "ng-annotate-loader": "0.1.0",
-    "ng-cache-loader": "0.0.15",
+    "karma-webpack": "~1.8.0",
+    "lodash-webpack-plugin": "^0.10.0",
+    "mocha": "~3.0.0",
+    "ng-annotate-loader": "~0.1.0",
+    "ng-cache-loader": "~0.0.15",
     "node-bourbon": "~4.2.3",
-    "node-sass": "~3.8.0",
+    "node-sass": "~3.10.0",
     "opt-cli": "~1.5.1",
-    "postcss-loader": "~0.9.1",
+    "postcss-loader": "^0.11.0",
+    "progress-bar-webpack-plugin": "^1.9.0",
     "raw-loader": "~0.5.1",
+    "rimraf": "~2.5.4",
     "sass-loader": "~4.0.0",
     "semantic-release": "^4.3.5",
     "style-loader": "~0.13.0",
     "toastr": "~2.1.2",
     "url-loader": "~0.5.7",
-    "webpack": "2.1.0-beta.19",
-    "webpack-dev-server": "2.1.0-beta.0",
-    "webpack-notifier": "~1.3.0"
+    "webpack": "^2.1.0-beta.24",
+    "webpack-dev-server": "^2.1.0-beta.0"
   },
   "repository": {
     "type": "git",

diff --git a/server/dev-server.js b/server/dev-server.js
@@ -1,19 +1,16 @@
-'use strict';
-
-var webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
-var config = require('../webpack.dev');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const config = require('../webpack.dev');
 new WebpackDevServer(webpack(config), {
-  hot: true,
   historyApiFallback: true,
   stats: {
     colors: true,
   }
 })
-.listen(config.port, config.ip, function(err) {
+.listen(8080, 'localhost', function(err) {
   if (err) {
     throw err;
   }
-  console.log('Listening at ' + config.ip + ':' + config.port);
+  console.log('Listening at localhost:8080');
 });
 
diff --git a/webpack.build.js b/webpack.build.js
@@ -1,7 +1,6 @@
-'use strict';
-
-var webpack = require('webpack');
-var config = require('./webpack.config.js');
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const config = require('./webpack.config.js');
 
 config.devtool = 'source-map';
 config.entry = {
@@ -43,21 +42,27 @@ config.externals = {
   }
 };
 
-config.module.postLoaders = [
-  {test: /\.js$/, loader: 'ng-annotate', exclude: /(node_modules)/}
-];
+config.module.rules = [
+  {test: /\.js$/, loader: 'ng-annotate', exclude: /(node_modules)/, enforce: 'post'},
+].concat(config.module.rules);
 
 config.plugins.push(
   new webpack.optimize.DedupePlugin(),
   new webpack.LoaderOptionsPlugin({
     minimize: true,
     debug: false,
-    quiet: true
+    quiet: true,
+    options:{
+      postcss: [
+        autoprefixer({ browsers: ['last 2 versions'] })
+      ]
+    }
   }),
   new webpack.optimize.UglifyJsPlugin({
     compress: {
       screw_ie8: true,
-      warnings: false
+      warnings: false,
+      dead_code: true
     }
   })
 );

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,40 +1,34 @@
-'use strict';
-
-var path = require('path');
-var webpack = require('webpack');
-var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
-var NODE_ENV = process.env.NODE_ENV;
-var nodeRoot = path.join(__dirname, 'node_modules');
-var appRoot = path.join(__dirname, 'app');
-var config = {
+const path = require('path');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
+const NODE_ENV = process.env.NODE_ENV;
+const nodeRoot = path.join(__dirname, 'node_modules');
+const appRoot = path.join(__dirname, 'app');
+const config = {
   context: appRoot,
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'sanji-auth-ui.js'
   },
   resolve: {
-    root: [nodeRoot],
-    // npm-linked packages can locate missing dependencies in app's node_modules
-    fallback: nodeRoot,
     alias: {
       'angular-material.css': nodeRoot + '/angular-material/angular-material.css',
       'angular-material-icons.css': nodeRoot + '/angular-material-icons/angular-material-icons.css',
       'toastr.scss': nodeRoot + '/toastr/toastr.scss',
       'svg-morpheus': nodeRoot + '/svg-morpheus/compile/unminified/svg-morpheus.js'
     },
-    extensions: ['', '.js', '.json', 'html', 'scss', 'css']
+    extensions: ['.js', '.json', 'html', 'scss', 'css']
   },
   module: {
-    preLoaders: [
-      {test: /\.js$/, loader: 'eslint', exclude: /(node_modules)/}
-    ],
-    loaders: [
+    rules: [
+      {test: /\.js$/, loader: 'eslint', exclude: /node_modules/, enforce: 'pre'},
       {test: /\.js$/, loader: 'babel?cacheDirectory', exclude: /(node_modules)/},
       { test: /\.html$/, loader: 'ng-cache?prefix=[dir]/[dir]', exclude: [/node_modules/, path.join(__dirname, '/app/index.html')] }
-    ],
-    noParse: []
+    ]
   },
   plugins: [
+    new ProgressBarPlugin(),
     new LodashModuleReplacementPlugin,
     new webpack.DefinePlugin({
       __TEST__: 'test' === NODE_ENV,

diff --git a/webpack.dev.js b/webpack.dev.js
@@ -1,39 +1,36 @@
-'use strict';
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const bourbon = require('node-bourbon').includePaths;
+const config = require('./webpack.config.js');
 
-var webpack = require('webpack');
-var autoprefixer = require('autoprefixer');
-var WebpackNotifierPlugin = require('webpack-notifier');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var bourbon = require('node-bourbon').includePaths;
-var config = require('./webpack.config.js');
-
-config.ip = 'localhost';
-config.port = 8080;
-config.debug = true;
 config.devtool = 'eval';
 config.entry = {
   'sanji-ui': [
     'webpack/hot/dev-server',
-    'webpack-dev-server/client?http://' + config.ip + ':' + config.port,
+    'webpack-dev-server/client?http://localhost:8080',
     './app.js'
   ]
 };
-config.module.loaders = [
+config.module.rules = [
+  {test: /\.js$/, loader: 'ng-annotate', exclude: /(node_modules)/, enforce: 'post'},
   {test: /\.scss/, loader: 'style!css!postcss!sass?includePaths[]=' + bourbon},
   {test: /\.css$/, loader: 'style!css!postcss?browsers=last 2 versions'},
   {test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192', exclude: /node_modules/},
   {test: /\.(woff|woff2)$/, loader: 'url?limit=10000&minetype=application/font-woff', exclude: /node_modules/},
   {test: /\.(ttf|eot|svg)$/, loader: 'file', exclude: /node_modules/}
-].concat(config.module.loaders);
-
-config.module.postLoaders = [
-  {test: /\.js$/, loader: 'ng-annotate', exclude: /(node_modules)/}
-];
-config.postcss = [ autoprefixer({ browsers: ['last 2 versions'] }) ];
+].concat(config.module.rules);
 
 config.plugins.push(
   new webpack.HotModuleReplacementPlugin(),
-  new WebpackNotifierPlugin({title: 'Webpack'}),
+  new webpack.LoaderOptionsPlugin({
+    debug: true,
+    options: {
+      postcss: [
+        autoprefixer({ browsers: ['last 2 versions'] })
+      ]
+    }
+  }),
   new HtmlWebpackPlugin({
     template: 'index.html',
     hash: true

diff --git a/webpack.test.js b/webpack.test.js
@@ -1,8 +1,7 @@
-'use strict';
-
-var config = require('./webpack.config');
-var autoprefixer = require('autoprefixer');
-var bourbon = require('node-bourbon').includePaths;
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const config = require('./webpack.config');
+const bourbon = require('node-bourbon').includePaths;
 
 config.devtool = 'source-map';
 // Should be an empty object if it's generating a test build
@@ -12,14 +11,22 @@ config.entry = {};
 // Karma will handle setting it up for you when it's a test build
 config.output = {};
 
-config.module.loaders = [
+config.module.rules = [
   {test: /\.scss/, loader: 'style!css!postcss!sass?includePaths[]=' + bourbon},
   {test: /\.css$/, loader: 'style!css!postcss'},
   {test: /\.(png|jpg|gif|jpeg)$/, loader: 'url-loader?limit=8192'},
   {test: /\.(woff|woff2)$/, loader: 'url?limit=10000&minetype=application/font-woff'},
   {test: /\.(ttf|eot|svg)$/, loader: 'file'}
-].concat(config.module.loaders);
+].concat(config.module.rules);
 
-config.postcss = [ autoprefixer({ browsers: ['last 2 versions'] }) ];
+config.plugins.push(
+  new webpack.LoaderOptionsPlugin({
+    options:{
+      postcss: [
+        autoprefixer({ browsers: ['last 2 versions'] })
+      ]
+    }
+  })
+);
 
 module.exports = config;