diff --git a/package.json b/package.json index 8deebcc..5da1af0 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "homepage": "", "author": "", "scripts": { - "dev": "webpack-dev-server --output-public-path=/static/", - "prod": "cross-env NODE_ENV=production webpack-dev-server --env.prod=true", + "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 --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", @@ -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,8 +55,10 @@ "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", + "progress-bar-webpack-plugin": "^1.9.3", "promise-polyfill": "^6.0.2", "redux": "^3.6.0", "redux-logger": "^3.0.1", @@ -69,6 +71,7 @@ "stylelint-webpack-plugin": "^0.7.0", "url-loader": "^0.5.7", "webpack": "^2.3.2", + "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/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/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; diff --git a/webpack.config.js b/webpack.config.js index 4fdf3ec..cfbf3d1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,11 @@ +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') const path = require('path') -// const autoprefixer = require('autoprefixer') +const autoprefixer = require('autoprefixer') const sourcePath = path.join(__dirname, './src') const staticsPath = path.join(__dirname, './static') @@ -10,10 +14,27 @@ 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 ProgressBarPlugin(), + new webpack.LoaderOptionsPlugin({ + options: { + postcss: [ + autoprefixer() + ] + } + }), new webpack.optimize.CommonsChunkPlugin({ children: true, async: true, @@ -23,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, @@ -48,27 +77,45 @@ 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: false, + drop_console: false, + keep_fnames: true, + global_defs: {} }, output: { comments: false } }) - ) - } else { plugins.push(new webpack.HotModuleReplacementPlugin()) } + ] + } else { + plugins = [ + ...plugins, + new webpack.HotModuleReplacementPlugin(), + ] + } return { - devtool: isProd ? 'source-map' : 'eval', + devtool: isProd ? '' : 'eval-source-map', cache: true, context: sourcePath, entry: { js: './index.js' },