Improves README

and settings
nikbabchenko · Feb 24, 2018 · fdb88c5 · fdb88c5
1 parent be1e11b
commit fdb88c5
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 125 deletions.
diff --git a/README.md b/README.md
@@ -1,25 +1,27 @@
 # Webpack Jedi - Webpack Sass/ES6/PUG(optional - on branch `jade`)
 
-Fast, stable and clean
+Light and strong.
 
-## What is rocking here
+## What works for you there
 * [Webpack 3](https://webpack.js.org/guides/getting-started/)
   * [tree-shaking](https://webpack.js.org/guides/tree-shaking/)
   * [file-loader](https://github.com/webpack-contrib/file-loader)
 
 
-### Extras
+### Additional
 * [Babel](https://babeljs.io/) - *Use next generation JavaScript, today.*
-* [BrowserSync](https://www.browsersync.io/) - *Time-saving synchronised browser testing.*
+* [BrowserSync](https://www.browsersync.io/) - *Time-saving synchronised browser testing.* (Optional)
   * Tunnel - *Make your website online through a random Public URL*
 * [ESLint](http://eslint.org/) - *The pluggable linting utility for JavaScript and JSX*
+* [PUG] (https://pugjs.org/api/getting-started.html) - *Temlate engine* (branch - *jade*)
+
+## Don't hesitate to make pull request
+![jedi](https://drive.google.com/uc?id=1pKxuokh_XEmkA3-Pdb3HOvrqPVMHWkPN)
 
 ## How to Add Multiple files
 This boilerplate is set for only 1 page: `index.html` but is easy to add more pages. You just need to add the HTML and JS files to `config/webpack.config.js`:
 
 ### Add HTML file
-- On `line 83` you have all your project Pages. Each `new HtmlWebpackPlugin` is used to create a new page.
-
 ```js
 // YOUR PROJECT PAGES
 new HtmlWebpackPlugin({
@@ -68,5 +70,3 @@ new HtmlWebpackPlugin({
     template: './my-page.html',
 }),
 ```
-
-You can use PUG instead of html. Try it on branch `jade`
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -9,16 +9,61 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const projectDir = path.resolve(`${__dirname}/..`);
+const webpack = require('webpack');
 
 const isDev = process.env.NODE_ENV !== 'production';
+const prod = process.env.NODE_ENV === 'production';
+const isBrowserSync = process.env.browsersync === 'true';
+/**
+ *  Settings chapter
+ */
+
+const additionalPlugins = [];
+
+/**
+ * UglifyJS only in prod mode
+ */
+if (prod) {
+    additionalPlugins.push(
+        new UglifyJSPlugin({
+            test: /\.js($|\?)/i,
+            parallel: true,
+            sourceMap: isDev,
+            uglifyOptions: {
+                mangle: true
+            }
+        }));
+}
 
 // Set a random Public URL to share your website with anyone
 // Or you can use a custom URL "http://mysuperwebsite.localtunnel.me"
 // const tunnel = 'mysuperwebsite';
 const tunnel = false;
 
+/**
+ * Browsercync only if needed
+ */
+if (isBrowserSync) {
+    additionalPlugins.push(
+        new BrowserSyncPlugin({
+            host: 'localhost',
+            port: 8288,
+            proxy: 'http://localhost:3000/',
+            ghostMode: { // Disable interaction features between different browsers
+                clicks: false,
+                forms: false,
+                scroll: false
+            },
+            tunnel,
+        }, {
+            // prevent BrowserSync from reloading the page
+            // and let Webpack Dev Server take care of this
+            reload: false
+        })
+    );
+}
+
 console.log('NODE_ENV:', process.env.NODE_ENV);
-console.log(process.env);
 
 const config = {
     context: projectDir + '/src',
@@ -100,6 +145,11 @@ const config = {
         port: 3000
     },
     plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production') // default value if not specified
+            }
+        }),
         new ExtractTextPlugin('[name].[contenthash:base64:5].css'),
         new CleanWebpackPlugin(['build/'], {
             root: projectDir
@@ -116,56 +166,23 @@ const config = {
             template: './pages/contact-us.html',
             filename: 'contact-us.html'
         }),
-        // new HtmlWebpackPlugin({
-        //     chunks: ['about-us'],
-        //     template: './about-us.html',
-        //     filename: 'about-us.html'
-        // }),
-        // new HtmlWebpackPlugin({
-        //     chunks: ['index'],
-        //     template: './coming-soon.html',
-        //     filename: 'coming-soon.html'
-        // }),
         new LodashModuleReplacementPlugin,
-        new UglifyJSPlugin({
-            mangle: true,
-            compress: {
-                warnings: false,
-                drop_console: !isDev,
-                drop_debugger: !isDev,
-                screw_ie8: true,
-            },
-        }),
         new CopyWebpackPlugin([
             {
-                "context": "../src",
-                "to": "",
-                "from": {
-                    "glob": "assets/img/**/*",
-                    "dot": true
+                'context': '../src',
+                'to': '',
+                'from': {
+                    'glob': 'assets/img/**/*',
+                    'dot': true
                 }
             },
         ], {
-                "ignore": [
-                    ".gitkeep"
-                ],
-                "debug": "warning"
-            }),
-        new BrowserSyncPlugin({
-            host: 'localhost',
-            port: 8288,
-            proxy: 'http://localhost:3000/',
-            ghostMode: { // Disable interaction features between different browsers
-                clicks: false,
-                forms: false,
-                scroll: false
-            },
-            tunnel,
-        }, {
-            // prevent BrowserSync from reloading the page
-            // and let Webpack Dev Server take care of this
-            reload: false
-        })
+            'ignore': [
+                '.gitkeep'
+            ],
+            'debug': 'warning'
+        }),
+        ...additionalPlugins
     ]
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
   "license": "MIT",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.js -p --optimize-minimize",
-    "start": "cross-env NODE_ENV=dev webpack-dev-server --config ./config/webpack.config.js"
+    "start": "cross-env NODE_ENV=dev webpack-dev-server --config ./config/webpack.config.js --open",
+    "dev": "cross-env NODE_ENV=dev webpack-dev-server --config ./config/webpack.config.js",
+    "dev-browsersync": "cross-env browsersync=true NODE_ENV=dev webpack-dev-server --config ./config/webpack.config.js"
   },
   "devDependencies": {
     "ajv-keywords": "^2.1.1",
@@ -41,6 +43,7 @@
     "style-loader": "^0.19.0",
     "stylelint": "8.x.x",
     "stylelint-config-standard": "^17.0.0",
+    "uglifyjs-webpack-plugin": "^1.2.2",
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.4"
   },