Custom build configuration to extract one js and css file from the components folder

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
-    "build": "node build/build.js",
+    "build": "cross-env FULL_BUNDLE=false webpack --progress --config webpack.build.config.js",
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
@@ -20,19 +20,24 @@
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
+    "babel-plugin-istanbul": "^3.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "chai": "^3.5.0",
     "chalk": "^1.1.3",
+    "chromedriver": "^2.27.2",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^3.1.4",
+    "cross-spawn": "^5.0.1",
     "css-loader": "^0.26.1",
     "eslint": "^3.14.1",
+    "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-html": "^2.0.0",
-    "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
@@ -42,8 +47,7 @@
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
+    "inject-loader": "^2.0.1",
-    "cross-env": "^3.1.4",
     "karma": "^1.4.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
@@ -55,27 +59,26 @@
     "karma-webpack": "^2.0.2",
     "lolex": "^1.5.2",
     "mocha": "^3.2.0",
-    "chai": "^3.5.0",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^2.0.1",
-    "babel-plugin-istanbul": "^3.1.2",
-    "phantomjs-prebuilt": "^2.1.14",
-    "chromedriver": "^2.27.2",
-    "cross-spawn": "^5.0.1",
     "nightwatch": "^0.9.12",
-    "selenium-server": "^3.0.1",
+    "node-sass": "^4.5.2",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.1.0",
+    "phantomjs-prebuilt": "^2.1.14",
     "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.3",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.8.0",
+    "stats-webpack-plugin": "^0.6.0",
     "url-loader": "^0.5.8",
     "vue-loader": "^11.1.4",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.2.4",
     "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.16.1",
     "webpack-merge": "^2.6.1"

webpack.build.config.js

@@ -1,34 +1,63 @@
 var webpack = require("webpack");
-var version = require("./package.json").version;
+var path = require("path");
-var banner = "/**\n" + " * vue-form-generator v" + version + "\n" + " * https://github.com/icebob/vue-form-generator\n" + " * Released under the MIT License.\n" + " */\n";
+// var version = require("./package.json").version;
+// var banner = "/**\n" + " * vue-form-generator v" + version + "\n" + " * https://github.com/icebob/vue-form-generator\n" + " * Released under the MIT License.\n" + " */\n";
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var StatsPlugin = require("stats-webpack-plugin");
+var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+var cssLoader = {
+  loader: "css-loader",
+  options: {
+    minimize: true
+  }
+};
+var sassLoader = {
+  loader: "sass-loader",
+  options: {
+    minimize: true
+  }
+};
 
 var loaders = [
 	{
-		"test": /\.js?$/,
+		test: /\.js?$/,
-		"exclude": /node_modules/,
+		exclude: /node_modules/,
-		"loader": "babel"
+		loader: "babel-loader"
 	},
+  {
+    test: /\.css$/,
+    loader: 'css-loader'
+  },
+  {
+    test: /\.scss$/,
+    loaders: ['css-loader', 'sass-loader']
+  },
 	{
-		"test": /\.vue?$/,
+		test: /\.vue?$/,
-		"loader": "vue"
+		loader: "vue-loader",
+   /* options:{
+		  loaders:{
+        scss: 'css-loader!sass-loader'
+      }
+    }*/
+    options:{
+      loaders: {
+        css: ExtractTextPlugin.extract({use:[cssLoader]}),
+        postcss: ExtractTextPlugin.extract({use:[cssLoader]}),
+        scss: ExtractTextPlugin.extract({use:[cssLoader,sassLoader]}),
+      }
+    }
 	}
 ];
-var cssFileName;
-if (process.env.FULL_BUNDLE) {
-	cssFileName = "vfg.css";
-} else {
-	cssFileName = "vfg-core.css";
-}
 
 module.exports = [
 	{
 		entry: "./src/index.js",
 		output: {
-			path: "./dist",
+			path: path.resolve(__dirname, './dist'),
-			filename: "vfg.js",
+			filename: "vue-tab-wizard.js",
-			library: "VueFormGenerator",
+			library: "VueTabWizard",
 			libraryTarget: "umd"
 		},
 
@@ -43,32 +72,19 @@ module.exports = [
 					warnings: false
 				}
 			}),
-			new webpack.optimize.DedupePlugin(),
+		/*	new webpack.BannerPlugin(banner, {
-			new webpack.BannerPlugin(banner, {
 				raw: true
-			}),
+			}),*/
-			new ExtractTextPlugin(cssFileName, { allChunks: true }),
+			new ExtractTextPlugin({filename:"vue-tab-wizard.min.css",  allChunks: true, fallback:"style-loader" }),
-			new StatsPlugin("../stats.json", {
+			new StatsPlugin( {filename:"./stats.json",
 				chunkModules: true
 				//exclude: [/node_modules[\\\/]react/]
-			})
+			}),
 		],
 
 		module: {
-			loaders
+			rules:loaders
 		},
 
-		vue: {
-			loaders: {
-				css: ExtractTextPlugin.extract("css"),
-				postcss: ExtractTextPlugin.extract("css"),
-				sass: ExtractTextPlugin.extract("css!sass"),
-			}
-		},
-
-		resolve: {
-			packageAlias: "browser"
-		}
 	}
-
+];
-];