From fdb88c5b421f405dd988cd142fedec34bc89779c Mon Sep 17 00:00:00 2001 From: nikbabchenko Date: Sat, 24 Feb 2018 23:06:49 +0200 Subject: [PATCH] Improves README and settings --- README.md | 16 +- config/webpack.config.js | 107 +++++++----- package-lock.json | 157 +++++++++++++----- package.json | 5 +- src/assets/js/mobile-menu.js | 8 - .../js/test/__snapshots__/logs.test.js.snap | 3 - src/assets/js/test/logs.test.js | 22 --- src/index.html | 2 +- 8 files changed, 195 insertions(+), 125 deletions(-) delete mode 100644 src/assets/js/mobile-menu.js delete mode 100755 src/assets/js/test/__snapshots__/logs.test.js.snap delete mode 100755 src/assets/js/test/logs.test.js diff --git a/README.md b/README.md index 6f2dca2..8c95246 100755 --- 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 index e6759ed..73b30d7 100755 --- 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 index 8cc7346..defbcbb 100755 --- a/package-lock.json +++ b/package-lock.json @@ -12633,60 +12633,78 @@ "optional": true }, "uglifyjs-webpack-plugin": { - "version": "0.4.6", - "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz", - "integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.2.tgz", + "integrity": "sha512-CG/NvzXfemUAm5Y4Guh5eEaJYHtkG7kKNpXEJHp9QpxsFVB5/qKvYWoMaq4sa99ccZ0hM3MK8vQV9XPZB4357A==", "dev": true, "requires": { - "source-map": "0.5.7", - "uglify-js": "2.8.29", - "webpack-sources": "1.0.2" + "cacache": "10.0.4", + "find-cache-dir": "1.0.0", + "schema-utils": "0.4.5", + "serialize-javascript": "1.4.0", + "source-map": "0.6.1", + "uglify-es": "3.3.9", + "webpack-sources": "1.1.0", + "worker-farm": "1.5.2" }, "dependencies": { - "cliui": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", - "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", + "ajv": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.1.1.tgz", + "integrity": "sha1-l41Zf7wrfQ5aXD3esUmmgvKr+g4=", "dev": true, "requires": { - "center-align": "0.1.3", - "right-align": "0.1.3", - "wordwrap": "0.0.2" + "fast-deep-equal": "1.0.0", + "fast-json-stable-stringify": "2.0.0", + "json-schema-traverse": "0.3.1" } }, - "uglify-js": { - "version": "2.8.29", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", - "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=", + "ajv-keywords": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.1.0.tgz", + "integrity": "sha1-rCsnk5xUPpXSwG5/f1wnvkqlQ74=", + "dev": true + }, + "commander": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz", + "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==", + "dev": true + }, + "schema-utils": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz", + "integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==", "dev": true, "requires": { - "source-map": "0.5.7", - "uglify-to-browserify": "1.0.2", - "yargs": "3.10.0" + "ajv": "6.1.1", + "ajv-keywords": "3.1.0" } }, - "window-size": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", - "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "dev": true }, - "wordwrap": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", - "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=", - "dev": true + "uglify-es": { + "version": "3.3.9", + "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz", + "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==", + "dev": true, + "requires": { + "commander": "2.13.0", + "source-map": "0.6.1" + } }, - "yargs": { - "version": "3.10.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", - "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", + "webpack-sources": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz", + "integrity": "sha512-aqYp18kPphgoO5c/+NaUvEeACtZjMESmDChuD3NBciVpah3XpMEU9VAAtIaB1BsfJWWTSdv8Vv1m3T0aRk2dUw==", "dev": true, "requires": { - "camelcase": "1.2.1", - "cliui": "2.1.0", - "decamelize": "1.2.0", - "window-size": "0.1.0" + "source-list-map": "2.0.0", + "source-map": "0.6.1" } } } @@ -13135,12 +13153,77 @@ "has-flag": "2.0.0" } }, + "uglify-js": { + "version": "2.8.29", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", + "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=", + "dev": true, + "requires": { + "source-map": "0.5.7", + "uglify-to-browserify": "1.0.2", + "yargs": "3.10.0" + }, + "dependencies": { + "camelcase": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", + "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", + "dev": true + }, + "cliui": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", + "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", + "dev": true, + "requires": { + "center-align": "0.1.3", + "right-align": "0.1.3", + "wordwrap": "0.0.2" + } + }, + "yargs": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", + "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", + "dev": true, + "requires": { + "camelcase": "1.2.1", + "cliui": "2.1.0", + "decamelize": "1.2.0", + "window-size": "0.1.0" + } + } + } + }, + "uglifyjs-webpack-plugin": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz", + "integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=", + "dev": true, + "requires": { + "source-map": "0.5.7", + "uglify-js": "2.8.29", + "webpack-sources": "1.0.2" + } + }, "which-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", "dev": true }, + "window-size": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", + "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", + "dev": true + }, + "wordwrap": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", + "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=", + "dev": true + }, "yargs": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz", diff --git a/package.json b/package.json index 1661654..4ebb842 100755 --- 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" }, diff --git a/src/assets/js/mobile-menu.js b/src/assets/js/mobile-menu.js deleted file mode 100644 index b1f1416..0000000 --- a/src/assets/js/mobile-menu.js +++ /dev/null @@ -1,8 +0,0 @@ -import $ from 'jquery'; - -export function mobileMenuToggler() { - $('.Header__burger').on('click', () => { - $(this).toggleClass('Header__burger--active'); - $('.Header__menu').toggleClass('Header__menu--active'); - }); -} \ No newline at end of file diff --git a/src/assets/js/test/__snapshots__/logs.test.js.snap b/src/assets/js/test/__snapshots__/logs.test.js.snap deleted file mode 100755 index a6945ce..0000000 --- a/src/assets/js/test/__snapshots__/logs.test.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`test logWorld() return greeting sentence 1`] = `"Wello Sandrina!"`; diff --git a/src/assets/js/test/logs.test.js b/src/assets/js/test/logs.test.js deleted file mode 100755 index d2bf080..0000000 --- a/src/assets/js/test/logs.test.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as logs from '../logs'; - -describe('test logWorld()', () => { - test('with a number expect to return its square', () => { - expect(logs.logSquare(3)).toBe(27); - }); - - test('with not a number string expect to return false', () => { - expect(logs.logSquare('3')).toBe(false); - }); - - - test('without a parameter expect to return false', () => { - expect(logs.logSquare()).toBe(false); - }); -}); - -describe('test logWorld()', () => { - test('return greeting sentence', () => { - expect(logs.logWorld('Sandrina')).toMatchSnapshot(); - }); -}); diff --git a/src/index.html b/src/index.html index 87d9464..0e24aa9 100644 --- a/src/index.html +++ b/src/index.html @@ -10,7 +10,7 @@

- Hello, Webpack! + Hello, Webpack!!!