First commit

.babelrc

@@ -0,0 +1,17 @@
+{
+  "ignore": [],
+  "env": {
+    "test": {
+      "presets": ["es2015"],
+      "plugins": ["lodash"]
+    },
+    "production": {
+      "presets": [["es2015", { "modules": false }]],
+      "plugins": ["lodash"]
+    },
+    "dev": {
+      "presets": [["es2015", { "modules": false }]],
+      "plugins": ["lodash"]
+    }
+  }
+}

.eslintrc

@@ -0,0 +1,36 @@
+{
+    'env': {
+        'browser': true,
+        'es6': true,
+        "jest": true,
+    },
+    'extends': 'eslint:recommended',
+    'parserOptions': {
+        'sourceType': 'module'
+    },
+    'rules': {
+        'indent': ['error', 4],
+        'linebreak-style': [ 'error', 'unix' ],
+        'quotes': [ 'error', 'single' ],
+        'semi': [ 'error', 'always' ],
+        'no-console': ['error', {
+            'allow': ['warn', 'error', 'log']
+        }],
+        'spaced-comment': ['error', 'always', {
+            'line': {
+                'markers': ['/'],
+                'exceptions': ['-', '+']
+            },
+            'block': {
+                'markers': ['!'],
+                'exceptions': ['*'],
+                'balanced': true
+            }
+        }]
+    },
+    'globals': {
+        'require': false,
+        'global': false,
+        'module': false,
+    }
+}

.gitignore

@@ -0,0 +1,4 @@
+.idea/
+node_modules/
+.vscode
+build

README.md

@@ -0,0 +1,71 @@
+# Essential Webpack 3 + PostCSS boilerplate
+
+A super minimal and basic boilerplate that I use as starter-kit on my personal projects! 😎
+
+## What is rocking here
+* [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
+* [Babel](https://babeljs.io/) - *Use next generation JavaScript, today.*
+* [BrowserSync](https://www.browsersync.io/) - *Time-saving synchronised browser testing.*
+  * Tunnel - *Make your website online through a random Public URL*
+* [ESLint](http://eslint.org/) - *The pluggable linting utility for JavaScript and JSX*
+* [StyleLint](https://stylelint.io/) - *A mighty, modern CSS linter and fixer in your stylesheets.*
+
+## 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({
+    chunks: ['index'], // where it is reading the JS files from
+    template: './index.html', // location of the HTML file
+}),
+```
+
+To add a Page, add a new instance of `HtmlWebpackPlugin` and create your HTML file. In this case the file is at `./pages/my-page.html`.
+
+```js
+new HtmlWebpackPlugin({
+    chunks: ['index'],
+    template: './index.html',
+}),
+new HtmlWebpackPlugin({
+    chunks: ['my-page'],
+    template: './pages/my-page.html',
+}),
+```
+
+### Add JS file
+`chunks: ['my-page']` refers to the key of your JS file entry point (`line 26`). There you set the entry points for your project. Each entry point is a JS file.
+
+Just add a new entry-point with the same name as the `chunks` value used on the step before.
+
+```js
+entry: {
+    'index': './index.js',
+    'my-page': './my-page.js',
+},
+```
+
+That's it! Save the file, `npm start` again and keep rocking at http://localhost:3001/my-page.html
+
+
+### Different HTML Files, same JS file
+You also can have HTML files that use the same JS file:
+```js
+new HtmlWebpackPlugin({
+    chunks: ['index'],
+    template: './index.html',
+}),
+new HtmlWebpackPlugin({
+    chunks: ['index'], // read from the same entry point as `index.html`
+    template: './my-page.html',
+}),
+```

config/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    // parser: 'sugarss',
+    sourceMap: true,
+    plugins: {
+        autoprefixer: {
+            browsers: ['last 3 versions', 'ie 11']
+        }
+    }
+};

config/webpack.config.js

@@ -0,0 +1,157 @@
+/* global process, __dirname, module */
+const postcssConfig = './config/postcss/postcss.config.js';
+
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+const path = require('path');
+const projectDir = path.resolve(`${__dirname}/..`);
+
+const isDev = process.env.NODE_ENV !== 'production';
+
+// 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;
+
+console.log('NODE_ENV:', process.env.NODE_ENV);
+
+const config = {
+    context: projectDir + '/src',
+    entry: {
+        'index': './index.js',
+        'contact-us': './contact-us.js',
+        // 'about-us': './about-us.js'
+    },
+    output: {
+        filename: isDev ? '[name].js' : '[name].[chunkhash].js',
+        path: path.resolve(projectDir, 'build'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                use: [{ loader: 'babel-loader', options: { cacheDirectory: true } }],
+                exclude: /node_modules(?!\/webpack-dev-server)/,
+            },
+            {
+                test: /\.css$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: isDev,
+                            },
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                config: { path: postcssConfig }
+                            }
+                        }
+                    ],
+                })
+            },
+            {
+                test: /\.scss$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                            },
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                config: { path: postcssConfig }
+                            }
+                        },
+                        {
+                            loader: 'sass-loader'
+                        }
+                    ],
+                })
+            },
+            {
+                test: /\.(png|jpg|gif|woff|woff2|eot|otf|ttf|svg)$/,
+                use: 'file-loader?name=assets/[name].[ext]',
+            },
+            {
+                test: /\.(html)$/,
+                use: {
+                    loader: 'html-loader',
+                }
+            }
+        ]
+    },
+    devServer: {
+        contentBase: path.resolve(__dirname, 'build'),
+        compress: true,
+        port: 3000
+    },
+    plugins: [
+        new ExtractTextPlugin('[name].[contenthash:base64:5].css'),
+        new CleanWebpackPlugin(['build/'], {
+            root: projectDir
+        }), // avoid Duplicated CSS files with different hash
+
+        // YOUR PROJECT PAGES
+        new HtmlWebpackPlugin({
+            chunks: ['index'],
+            template: './index.html',
+        }),
+
+        new HtmlWebpackPlugin({
+            chunks: ['contact-us'],
+            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 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
+        })
+    ]
+};
+
+module.exports = config;