webpack config

Author: anton-lunev

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

bower.json

@@ -2,7 +2,6 @@
   "name": "easy-learn",
   "version": "0.0.0",
   "dependencies": {
-    "angular": "^1.5.0",
     "angular-local-storage": "~0.2.2",
     "angular-animate": "~1.5.0",
     "angular-ui-router": "^0.2.18",

package.json

@@ -6,15 +6,18 @@
   "electronVersion": "0.36.9",
   "scripts": {
     "start": "export NODE_ENV='dev'; electron ./dist/main.js",
-    "build": "electron-packager ./dist/ easy-learn --platform=darwin --arch=x64 --out ~/Desktop/easy-learn --asar --version 0.36.9 --overwrite --icon=./src/images/app-icon.icns",
-    "buildwin": "electron-packager ./dist/ easy-learn --platform=win32 --arch=x64 --out ~/Desktop/easy-learn --version 0.36.9 --overwrite --icon=./src/images/app-icon.ico"
+    "buildMac": "electron-packager ./dist/ easy-learn --platform=darwin --arch=x64 --out ~/Desktop/easy-learn --asar --version 0.36.9 --overwrite --icon=./src/images/app-icon.icns",
+    "buildwin": "electron-packager ./dist/ easy-learn --platform=win32 --arch=x64 --out ~/Desktop/easy-learn --version 0.36.9 --overwrite --icon=./src/images/app-icon.ico",
+    "build": "webpack --progress --colors"
   },
   "devDependencies": {
     "babel-core": "^6.7.2",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "browser-sync": "^2.11.1",
     "browser-sync-spa": "^1.0.3",
+    "clean-webpack-plugin": "^0.1.8",
+    "copy-webpack-plugin": "^1.1.1",
     "css-loader": "^0.23.1",
     "del": "^2.2.0",
     "electron-packager": "^5.1.0",
@@ -40,13 +43,19 @@
     "gulp-svg-sprite": "^1.2.19",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.10.0",
+    "less-loader": "^2.2.2",
     "main-bower-files": "^2.11.1",
     "ng-annotate-loader": "^0.1.0",
     "ng-annotate-webpack-plugin": "^0.1.2",
     "require-dir": "^0.3.0",
     "run-sequence": "^1.1.5",
     "style-loader": "^0.13.0",
+    "svg-sprite-loader": "0.0.18",
     "util": "^0.10.3",
-    "webpack": "^1.12.14"
+    "webpack": "^1.12.14",
+    "webpack-svgstore-plugin": "^2.1.3"
+  },
+  "dependencies": {
+    "angular": "^1.5.0"
   }
 }

src/app/app.js src/app/index.js

@@ -1,3 +1,8 @@
+import './app.less';
+import '../svg/close.svg';
+
+import angular from 'angular';
+
 angular.module('easy-learn', [
     'ngAnimate', 
     'LocalStorageModule',

webpack.config.js

@@ -5,15 +5,18 @@ const path = require('path');
 const webpack = require('webpack');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const DIR = {
     src: path.join(__dirname, 'src'),
-    dist: path.join(__dirname, 'dist')
+    dist: path.join(__dirname, 'dist1')
 };
 
 module.exports = {
 
-    entry: DIR.src + '/app',
+    entry: {
+        'main': DIR.src + '/app'
+    },
 
     output: {
         path: DIR.dist,
@@ -22,11 +25,11 @@ module.exports = {
     },
 
     resolve: {
-        modulesDirectories: ['node_modules', 'bower_components'],
+        modulesDirectories: ['node_modules'],
         alias: {
-            compat: path.join(DIR.src, 'compat'),
-            components: path.join(DIR.src, 'components'),
-            services: path.join(DIR.src, 'services')
+            // compat: path.join(DIR.src, 'compat'),
+        //     components: path.join(DIR.src, 'components'),
+        //     services: path.join(DIR.src, 'services')
         }
     },
 
@@ -37,28 +40,30 @@ module.exports = {
         }),
 
         new HtmlWebpackPlugin({
-            template: 'src/index.html'
+            template: 'src/index.html',
+            inject: 'body'
         }),
 
         new webpack.HotModuleReplacementPlugin(),
-
-        new webpack.ResolverPlugin([
-            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
-        ]),
-
         new webpack.optimize.CommonsChunkPlugin({
             name: 'main',
             async: true
-        })
+        }),
+
+        new CopyWebpackPlugin([
+            { from: DIR.src + '/images', to: 'images'},
+            { from: DIR.src + '/main.js'},
+            { from: DIR.src + '/package.json'}
+        ])
     ],
 
     module: {
         preLoaders: [
-            {
-                // test: /\.js$/,
-                // loader: 'eslint',
-                // exclude: /node_modules|bower_components/
-            }
+            // {
+            // test: /\.js$/,
+            // loader: 'eslint',
+            // exclude: /node_modules|bower_components/
+            // }
         ],
         loaders: [
             {
@@ -67,19 +72,30 @@ module.exports = {
             },
             {
                 test: /\.js$/,
-                loader: 'babel',
+                loader: 'ng-annotate!babel',
                 exclude: /node_modules|bower_components/
             },
             {
                 test: /\.html$/,
                 loader: 'html'
             },
+            {
+                test: /\.less$/,
+                loader: "style!css!less"
+            },
             {
                 test: /\.css$/,
                 loader: 'style!css'
             },
             {
-                test: /(\.eot|\.ttf|\.woff2?|\.svg)$/,
+                test: /\.svg$/,
+                loader: 'svg-sprite?' + JSON.stringify({
+                    name: '[name]',
+                    angularBaseWorkaround: true
+                })
+            },
+            {
+                test: /(\.eot|\.ttf|\.woff2?)$/,
                 loader: 'url'
             }
         ]