From c6b35726863ea6065353dbce9904bfdb28d3fbeb Mon Sep 17 00:00:00 2001 From: cristijora Date: Sun, 16 Apr 2017 13:00:18 +0300 Subject: [PATCH] Custom build configuration to extract one js and css file from the components folder --- package.json | 33 +++++++++------- webpack.build.config.js | 88 ++++++++++++++++++++++++----------------- 2 files changed, 70 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index e4f396d..73a86d8 100644 --- a/package.json +++ b/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", - "cross-env": "^3.1.4", + "inject-loader": "^2.0.1", "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", - "semver": "^5.3.0", - "shelljs": "^0.7.6", + "node-sass": "^4.5.2", "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" diff --git a/webpack.build.config.js b/webpack.build.config.js index 97c0ac2..1b4e4fa 100644 --- a/webpack.build.config.js +++ b/webpack.build.config.js @@ -1,34 +1,63 @@ var webpack = require("webpack"); -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 path = require("path"); +// 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?$/, - "exclude": /node_modules/, - "loader": "babel" + test: /\.js?$/, + exclude: /node_modules/, + loader: "babel-loader" }, + { + test: /\.css$/, + loader: 'css-loader' + }, + { + test: /\.scss$/, + loaders: ['css-loader', 'sass-loader'] + }, { - "test": /\.vue?$/, - "loader": "vue" + test: /\.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", - filename: "vfg.js", - library: "VueFormGenerator", + path: path.resolve(__dirname, './dist'), + filename: "vue-tab-wizard.js", + 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 StatsPlugin("../stats.json", { + }),*/ + new ExtractTextPlugin({filename:"vue-tab-wizard.min.css", allChunks: true, fallback:"style-loader" }), + 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" - } } - -]; \ No newline at end of file +];