From 20686d632e04faee01e859ffe185d12949c81df3 Mon Sep 17 00:00:00 2001 From: ARAIN Date: Tue, 12 Sep 2017 08:12:31 -0500 Subject: [PATCH 1/2] fixing global css file and some prod build issues --- README.md | 3 ++- config/build/webpack.common.js | 25 ++++++++++++------------- config/build/webpack.dev.js | 13 +++++++++---- config/build/webpack.prod.js | 28 ++++++++++++++-------------- config/server/prod-server.js | 13 +++++++++++++ config/test/webpack.test.js | 4 ++-- package.json | 8 +++++--- src/constants.scss | 2 +- src/global.scss | 2 +- 9 files changed, 59 insertions(+), 39 deletions(-) create mode 100644 config/server/prod-server.js diff --git a/README.md b/README.md index 43d6854..490fe0e 100644 --- a/README.md +++ b/README.md @@ -15,4 +15,5 @@ A basic Angular 4 seed project utilizing the following technologies: * `npm test` - run the project unit tests (*.spec.ts files) * `npm run coverage` - run the project unit tests one time and print out a coverage report, generated under **/coverage/index.html** * `npm run lint` - run the project linting (will be run every time `npm test` is run) -* `npm run build` - generate a production build for the project, which will be inserted into dist/ \ No newline at end of file +* `npm run build` - generate a production build for the project, which will be inserted into dist/ +* `npm run server` - run a live-server instance off of the **dist/** directory (generated from the `build` command) \ No newline at end of file diff --git a/config/build/webpack.common.js b/config/build/webpack.common.js index dd4841a..f2925d7 100644 --- a/config/build/webpack.common.js +++ b/config/build/webpack.common.js @@ -1,12 +1,14 @@ -var webpack = require('webpack'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -var helpers = require('../helpers'); +const webpack = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const helpers = require('../helpers'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { 'polyfills': './src/polyfills.ts', 'vendor': './src/vendor.ts', - 'app': './src/main.ts' + 'app': './src/main.ts', + 'styles': './src/global.scss' }, resolve: { @@ -28,20 +30,17 @@ module.exports = { { test: /\.scss$/, exclude: [ /node_modules/, helpers.root('src', 'global.scss') ], - use: [ 'raw-loader', 'sass-loader' ] + use: [ 'to-string-loader', 'css-loader', 'sass-loader' ] }, { - test: helpers.root('src', 'global.scss'), - use: [ 'style-loader', 'css-loader', 'sass-loader' ] + test: /global\.scss$/, + use: ExtractTextPlugin.extract({ + use: 'css-loader!sass-loader' + }) }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/, use: 'file-loader?name=assets/[name].[hash].[ext]' - }, - { - test: /\.css$/, - exclude: helpers.root('src', 'app'), - use: [ 'raw-loader', 'css-loader' ] } ] }, @@ -57,7 +56,7 @@ module.exports = { new webpack.ContextReplacementPlugin( /angular(\\|\/)core(\\|\/)@angular/, - helpers.root('src'), // location of your src + helpers.root('src'), {} ) ] diff --git a/config/build/webpack.dev.js b/config/build/webpack.dev.js index 9d83467..522ace5 100644 --- a/config/build/webpack.dev.js +++ b/config/build/webpack.dev.js @@ -1,6 +1,7 @@ -var webpackMerge = require('webpack-merge'); -var commonConfig = require('./webpack.common.js'); -var helpers = require('../helpers'); +const webpackMerge = require('webpack-merge'); +const commonConfig = require('./webpack.common.js'); +const helpers = require('../helpers'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = webpackMerge(commonConfig, { devtool: 'cheap-module-eval-source-map', @@ -23,5 +24,9 @@ module.exports = webpackMerge(commonConfig, { changeOrigin: true } }*/ - } + }, + + plugins: [ + new ExtractTextPlugin('styles.css') + ] }); \ No newline at end of file diff --git a/config/build/webpack.prod.js b/config/build/webpack.prod.js index a7789db..ab0de29 100644 --- a/config/build/webpack.prod.js +++ b/config/build/webpack.prod.js @@ -1,19 +1,19 @@ -var webpack = require("webpack"); -var webpackMerge = require("webpack-merge"); -var ExtractTextPlugin = require("extract-text-webpack-plugin"); -var commonConfig = require("./webpack.common.js"); -var helpers = require("../helpers"); +const webpack = require('webpack'); +const webpackMerge = require('webpack-merge'); +const commonConfig = require('./webpack.common.js'); +const helpers = require('../helpers'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); -const ENV = process.env.NODE_ENV = process.env.ENV = "production"; +const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; module.exports = webpackMerge(commonConfig, { - devtool: "source-map", + devtool: 'source-map', output: { - path: helpers.root("dist"), - publicPath: "/", - filename: "[name].[hash].js", - chunkFilename: "[id].[hash].chunk.js" + path: helpers.root('dist'), + publicPath: '/', + filename: '[name].[hash].js', + chunkFilename: '[id].[hash].chunk.js' }, plugins: [ @@ -23,10 +23,10 @@ module.exports = webpackMerge(commonConfig, { keep_fnames: true } }), - new ExtractTextPlugin("[name].[hash].css"), + new ExtractTextPlugin('styles.[hash].css'), new webpack.DefinePlugin({ - "process.env": { - "ENV": JSON.stringify(ENV) + 'process.env': { + 'ENV': JSON.stringify(ENV) } }), new webpack.LoaderOptionsPlugin({ diff --git a/config/server/prod-server.js b/config/server/prod-server.js new file mode 100644 index 0000000..88a5b26 --- /dev/null +++ b/config/server/prod-server.js @@ -0,0 +1,13 @@ +const liveServer = require("live-server"); + +const params = { + port: 8181, + root: 'dist', + open: false, + ignore: 'scss,my/templates', + file: 'index.html', + wait: 1000, + logLevel: 2 +}; + +liveServer.start(params); \ No newline at end of file diff --git a/config/test/webpack.test.js b/config/test/webpack.test.js index b4794df..ca6c5ff 100644 --- a/config/test/webpack.test.js +++ b/config/test/webpack.test.js @@ -22,12 +22,12 @@ module.exports = { { test: /\.scss$/, exclude: /node_modules/, - use: [ 'raw-loader', 'sass-loader' ] + use: [ 'to-string-loader', 'sass-loader' ] }, { test: /\.css$/, include: helpers.root('src', 'app'), - use: 'raw-loader' + use: 'to-string-loader' } ] }, diff --git a/package.json b/package.json index 1a18b8b..21954f9 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "coverage": "npm run lint && karma start config/test/karma.conf.js --coverage=true", "lint": "tslint -c config/tslint.json \"src/app/**/*.ts\"", "pretest": "npm run lint", - "build": "rimraf dist && webpack --config config/build/webpack.prod.js --progress --profile --bail" + "build": "rimraf dist && webpack --config config/build/webpack.prod.js --progress --profile --bail", + "server": "node config/server/prod-server.js" }, "dependencies": { "@angular/common": "^4.3.6", @@ -37,6 +38,7 @@ "codelyzer": "~3.2.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.1", + "extract-text-webpack-plugin": "3.0.0", "file-loader": "^0.8.5", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.26.0", @@ -51,13 +53,13 @@ "karma-jasmine-html-reporter": "^0.2.2", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.4", + "live-server": "1.2.0", "loader-utils": "^1.1.0", "node-sass": "^4.5.3", "protractor": "~5.1.2", - "raw-loader": "^0.5.1", "reflect-metadata": "^0.1.10", "sass-loader": "^6.0.6", - "style-loader": "^0.18.2", + "to-string-loader": "^1.1.5", "tslint": "~5.7.0", "typescript": "~2.5.2", "webpack": "~3.4.1", diff --git a/src/constants.scss b/src/constants.scss index ca30c5b..c9d5ee7 100644 --- a/src/constants.scss +++ b/src/constants.scss @@ -3,7 +3,7 @@ $primary-color: #0064ff; $primary-color-light: #3f86ff; -$primary-bg: #ffffff; +$primary-bg: #000000; $primary-content-bg: #4b4b4b; $primary-font: Tahoma, Arial, sans-serif; diff --git a/src/global.scss b/src/global.scss index e04e1c1..f26cc6f 100644 --- a/src/global.scss +++ b/src/global.scss @@ -6,7 +6,7 @@ body { background-color: $primary-bg; - color: $primary-color; + color: #ffffff; font-family: $primary-font; font-size: $primary-font-size; } \ No newline at end of file From 907fd1a9e0bc76ba6b42c581ca87e80ee8f9835b Mon Sep 17 00:00:00 2001 From: Tynarus Date: Tue, 12 Sep 2017 08:22:26 -0500 Subject: [PATCH 2/2] Fixing unit testing due to webpack config changes --- config/test/webpack.test.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/config/test/webpack.test.js b/config/test/webpack.test.js index ca6c5ff..1b22146 100644 --- a/config/test/webpack.test.js +++ b/config/test/webpack.test.js @@ -22,12 +22,7 @@ module.exports = { { test: /\.scss$/, exclude: /node_modules/, - use: [ 'to-string-loader', 'sass-loader' ] - }, - { - test: /\.css$/, - include: helpers.root('src', 'app'), - use: 'to-string-loader' + use: [ 'to-string-loader', 'css-loader', 'sass-loader' ] } ] },