From 30a812d5e4856299dd0b6a564d9d3762e7b9462f Mon Sep 17 00:00:00 2001 From: Ahushh Date: Fri, 12 May 2017 22:48:55 +0300 Subject: [PATCH 1/8] Add open browser, bundle analyzer, firendly errors plugins to webpack config, update uglify, disable eval devtool --- package.json | 9 +++++--- webpack.config.js | 57 ++++++++++++++++++++++++++++++++++++----------- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 8deebcc..fb9aad1 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "author": "", "scripts": { "dev": "webpack-dev-server --output-public-path=/static/", - "prod": "cross-env NODE_ENV=production webpack-dev-server --env.prod=true", - "build": "cross-env NODE_ENV=production webpack --env.prod=true", + "prod": "cross-env NODE_ENV=production webpack-dev-server --open --env.prod=true", + "build": "cross-env NODE_ENV=production webpack --open --env.prod=true", "lint": "yarn run lint-js && yarn run lint-css", "lint-js": "eslint --ext .js devServer.js webpack.config.dev.js webpack.config.prod.js ./src", "lint-css": "stylelint './src/**/*.scss' --syntax scss --fix; exit 0", @@ -26,7 +26,6 @@ "angular-messages": "^1.6.4", "angular-translate": "^2.15.1", "angular-ui-router": "^0.4.2", - "autoprefixer": "^6.7.7", "babel-core": "^6.10.4", "babel-eslint": "^7.1.1", "babel-loader": "^6.2.4", @@ -47,6 +46,7 @@ "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", "file-loader": "^0.10.1", + "friendly-errors-webpack-plugin": "^1.6.1", "happypack": "^3.0.2", "html-loader": "^0.4.5", "img-loader": "^2.0.0", @@ -55,6 +55,7 @@ "ng-annotate-loader": "^0.2.0", "ng-redux": "^3.4.0-beta.1", "node-sass": "^4.5.1", + "openpack": "^1.0.0", "outdated-browser-pro": "^1.0.0", "postcss-loader": "^1.3.3", "promise-polyfill": "^6.0.2", @@ -69,6 +70,8 @@ "stylelint-webpack-plugin": "^0.7.0", "url-loader": "^0.5.7", "webpack": "^2.3.2", + "webpack-browser-plugin": "^1.0.20", + "webpack-bundle-analyzer": "^2.8.1", "webpack-dev-middleware": "^1.8.4", "webpack-dev-server": "^2.3.0", "webpack-hot-middleware": "^2.13.2" diff --git a/webpack.config.js b/webpack.config.js index 4fdf3ec..69ea5b3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,10 @@ +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin +const WebpackBrowserPlugin = require('webpack-browser-plugin') + +const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin') const webpack = require('webpack') const HappyPack = require('happypack') const path = require('path') -// const autoprefixer = require('autoprefixer') const sourcePath = path.join(__dirname, './src') const staticsPath = path.join(__dirname, './static') @@ -10,10 +13,19 @@ module.exports = function () { const nodeEnv = process.env.NODE_ENV ? 'production' : 'development' const isProd = nodeEnv === 'production' - const plugins = [ - new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(nodeEnv) } }), + let plugins = [ + new webpack.DefinePlugin({ + 'process.env': { NODE_ENV: JSON.stringify(nodeEnv) } + }), new webpack.NoEmitOnErrorsPlugin(), new webpack.NamedModulesPlugin(), + new webpack.ProvidePlugin({ + // $: 'jquery', + // jQuery: 'jquery', + // 'window.jQuery': 'jquery', + // 'windows.jQuery': 'jquery' + }), + new FriendlyErrorsWebpackPlugin(), new webpack.optimize.CommonsChunkPlugin({ children: true, async: true, @@ -48,27 +60,46 @@ module.exports = function () { ] let methods = [] if (isProd) { - plugins.push( + plugins = [ + ...plugins, + ...typeof BundleAnalyzerPlugin === 'undefined' ? [] : [new BundleAnalyzerPlugin()], new webpack.optimize.UglifyJsPlugin({ sourceMap: false, compress: { - warnings: false, - screw_ie8: true, - conditionals: true, - unused: true, - comparisons: true, sequences: true, + properties: true, dead_code: true, + drop_debugger: true, + unsafe: false, + conditionals: true, + comparisons: true, evaluate: true, + booleans: true, + loops: true, + unused: true, + hoist_funs: true, + hoist_vars: false, if_return: true, - join_vars: true + join_vars: true, + cascade: true, + side_effects: true, + warnings: true, + drop_console: false, + keep_fnames: true, + global_defs: {} }, output: { comments: false } }) - ) - } else { plugins.push(new webpack.HotModuleReplacementPlugin()) } + ] + } else { + plugins = [ + ...plugins, + new webpack.HotModuleReplacementPlugin(), + new WebpackBrowserPlugin() + ] + } return { - devtool: isProd ? 'source-map' : 'eval', + devtool: 'source-map', cache: true, context: sourcePath, entry: { js: './index.js' }, From 1b72a6729ebd91d11ffd613ea5422143aae9c601 Mon Sep 17 00:00:00 2001 From: Ahushh Date: Fri, 12 May 2017 23:52:18 +0300 Subject: [PATCH 2/8] Remove webpack-browser-plugin, use --open instead --- package.json | 5 ++--- webpack.config.js | 2 -- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index fb9aad1..803a577 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,9 @@ "homepage": "", "author": "", "scripts": { - "dev": "webpack-dev-server --output-public-path=/static/", + "dev": "webpack-dev-server --open --output-public-path=/static/", "prod": "cross-env NODE_ENV=production webpack-dev-server --open --env.prod=true", - "build": "cross-env NODE_ENV=production webpack --open --env.prod=true", + "build": "cross-env NODE_ENV=production webpack --env.prod=true", "lint": "yarn run lint-js && yarn run lint-css", "lint-js": "eslint --ext .js devServer.js webpack.config.dev.js webpack.config.prod.js ./src", "lint-css": "stylelint './src/**/*.scss' --syntax scss --fix; exit 0", @@ -70,7 +70,6 @@ "stylelint-webpack-plugin": "^0.7.0", "url-loader": "^0.5.7", "webpack": "^2.3.2", - "webpack-browser-plugin": "^1.0.20", "webpack-bundle-analyzer": "^2.8.1", "webpack-dev-middleware": "^1.8.4", "webpack-dev-server": "^2.3.0", diff --git a/webpack.config.js b/webpack.config.js index 69ea5b3..b6746ee 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,4 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin -const WebpackBrowserPlugin = require('webpack-browser-plugin') const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin') const webpack = require('webpack') @@ -95,7 +94,6 @@ module.exports = function () { plugins = [ ...plugins, new webpack.HotModuleReplacementPlugin(), - new WebpackBrowserPlugin() ] } return { From 6861859deb3a5ab431f50c397999bd130c931e09 Mon Sep 17 00:00:00 2001 From: Ahushh Date: Fri, 12 May 2017 23:52:56 +0300 Subject: [PATCH 3/8] Disable uglify warnings --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index b6746ee..4a6fda5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -82,7 +82,7 @@ module.exports = function () { join_vars: true, cascade: true, side_effects: true, - warnings: true, + warnings: false, drop_console: false, keep_fnames: true, global_defs: {} From 295ff31c0645106a111183c90a90dec1ed932fca Mon Sep 17 00:00:00 2001 From: Ahushh Date: Fri, 12 May 2017 23:54:32 +0300 Subject: [PATCH 4/8] Add progress-bar-webpack-plugin --- package.json | 1 + webpack.config.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/package.json b/package.json index 803a577..5da1af0 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "openpack": "^1.0.0", "outdated-browser-pro": "^1.0.0", "postcss-loader": "^1.3.3", + "progress-bar-webpack-plugin": "^1.9.3", "promise-polyfill": "^6.0.2", "redux": "^3.6.0", "redux-logger": "^3.0.1", diff --git a/webpack.config.js b/webpack.config.js index 4a6fda5..dc75fc6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,6 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin +const ProgressBarPlugin = require('progress-bar-webpack-plugin') const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin') const webpack = require('webpack') const HappyPack = require('happypack') @@ -25,6 +26,7 @@ module.exports = function () { // 'windows.jQuery': 'jquery' }), new FriendlyErrorsWebpackPlugin(), + new ProgressBarPlugin(), new webpack.optimize.CommonsChunkPlugin({ children: true, async: true, From 002b7c3fd7e2128157fc0823fd6be0a60a0bbfdf Mon Sep 17 00:00:00 2001 From: Ahushh Date: Fri, 12 May 2017 23:56:18 +0300 Subject: [PATCH 5/8] Remove postcss config --- postcss.config.js | 1 - webpack.config.js | 8 ++++++++ 2 files changed, 8 insertions(+), 1 deletion(-) delete mode 100644 postcss.config.js diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 3a2c210..0000000 --- a/postcss.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = { plugins: [ require('autoprefixer') ] } diff --git a/webpack.config.js b/webpack.config.js index dc75fc6..ac99a9c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,6 +5,7 @@ const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin') const webpack = require('webpack') const HappyPack = require('happypack') const path = require('path') +const autoprefixer = require('autoprefixer') const sourcePath = path.join(__dirname, './src') const staticsPath = path.join(__dirname, './static') @@ -27,6 +28,13 @@ module.exports = function () { }), new FriendlyErrorsWebpackPlugin(), new ProgressBarPlugin(), + new webpack.LoaderOptionsPlugin({ + options: { + postcss: [ + autoprefixer() + ] + } + }), new webpack.optimize.CommonsChunkPlugin({ children: true, async: true, From d7df7923f8da853c69f225921479e0c8a90236e6 Mon Sep 17 00:00:00 2001 From: Ahushh Date: Sat, 13 May 2017 00:13:58 +0300 Subject: [PATCH 6/8] Add css minification --- webpack.config.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index ac99a9c..952b3fe 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -44,7 +44,15 @@ module.exports = function () { verbose: false, id: 'scss', threads: 2, - loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] + loaders: ['style-loader', + { + loader: 'css-loader', + options: { + minimize: isProd + } + }, + 'postcss-loader', + 'sass-loader'] }), new HappyPack({ verbose: false, From 8e8a8adaae5a5ea47d309287a21806bf81c96ccd Mon Sep 17 00:00:00 2001 From: Ahushh Date: Sat, 13 May 2017 00:15:02 +0300 Subject: [PATCH 7/8] Run lintfix-css --- src/styles/colors.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 0b43682..07a517a 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -1,8 +1,7 @@ -$header: #00BFA5; -$sub-header: #607D8B; +$header: #00bfa5; +$sub-header: #607d8b; $header-color: #fff; - -$sidebar: #37474F; +$sidebar: #37474f; $sidebar-color: #fff; $brand-color: #373c47; From c2d99953e18c98e483e3c535af8663fdfa014c5e Mon Sep 17 00:00:00 2001 From: Ahushh Date: Sat, 13 May 2017 01:26:59 +0300 Subject: [PATCH 8/8] Use eval-source-map for dev, no devtool for prod --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 952b3fe..cfbf3d1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -115,7 +115,7 @@ module.exports = function () { ] } return { - devtool: 'source-map', + devtool: isProd ? '' : 'eval-source-map', cache: true, context: sourcePath, entry: { js: './index.js' },