Migrate from Gulp to Webpack (#138)

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+site/data/webpack.json

README.md

@@ -2,7 +2,7 @@
 
 **A Hugo boilerplate for creating truly epic websites**
 
-This is a boilerplate for using [Hugo](https://gohugo.io/) as a static site generator and [Gulp](https://gulpjs.com/) + [Webpack](https://webpack.js.org/) as your asset pipeline.
+This is a boilerplate for using [Hugo](https://gohugo.io/) as a static site generator and [Webpack](https://webpack.js.org/) as your asset pipeline.
 
 Victor Hugo setup to use [PostCSS](http://postcss.org/) and [Babel](https://babeljs.io/) for CSS and JavaScript compiling/transpiling.
 
@@ -30,25 +30,13 @@ While developing your website, use:
 npm start
 ```
 
-or
-
-```bash
-gulp server
-```
-
 or for developing your website with `hugo server --buildDrafts --buildFuture`, use:
 
 ```bash
-npm run start-preview
+npm run preview
 ```
 
-or
-
-```bash
-gulp server-preview
-```
-
-Then visit http://localhost:3000/ *- or a new browser windows popped-up already -* to preview your new website. BrowserSync will automatically reload the CSS or refresh the whole page, when stylesheets or content changes.
+Then visit http://localhost:3000/ _- or a new browser windows popped-up already -_ to preview your new website. Webpack Dev Server will automatically reload the CSS or refresh the whole page, when stylesheets or content changes.
 
 ### :package: Static build
 
@@ -61,10 +49,10 @@ npm run build
 To get a preview of posts or articles not yet published, run:
 
 ```bash
-npm run build-preview
+npm run build:preview
 ```
 
-See [package.json](package.json#L7) or the included gulp file for all tasks.
+See [package.json](package.json#L8) for all tasks.
 
 ## Structure
 
@@ -77,8 +65,8 @@ See [package.json](package.json#L7) or the included gulp file for all tasks.
 |  |  |--index.html    // The index page
 |  |--static           // Files in here ends up in the public folder
 |--src                 // Files that will pass through the asset pipeline
-|  |--css              // CSS files in the root of this folder will end up in /css/...
-|  |--js               // app.js will be compiled to /app.js with babel
+|  |--css              // Webpack will bundle imported css seperately
+|  |--index.js         // index.js is the webpack entry for your css & js assets
 ```
 
 ## Basic Concepts
@@ -97,22 +85,22 @@ use the `site/static` folder. Images, font-files, etc, all go there.
 Files in the static folder end up in the web root. So a file called `site/static/favicon.ico`
 will end up being available as `/favicon.ico` and so on...
 
-The `src/js/app.js` file is the entrypoint for webpack and will be built to `/dist/app.js`.
+The `src/index.js` file is the entrypoint for webpack and will be built to `/dist/main.js`
 
 You can use **ES6** and use both relative imports or import libraries from npm.
 
-Any CSS file directly under the `src/css/` folder will get compiled with [PostCSS Next](http://cssnext.io/)
-to `/dist/css/{filename}.css`. Import statements will be resolved as part of the build.
+Any CSS file imported into the `index.js` will be run through Webpack, compiled with [PostCSS Next](http://cssnext.io/), and
+minified to `/dist/[name].[hash:5].css`. Import statements will be resolved as part of the build.
 
 ## Environment variables
 
-To separate the development and production *- aka build -* stages, all gulp tasks run with a node environment variable named either `development` or `production`.
+To separate the development and production _- aka build -_ stages, all gulp tasks run with a node environment variable named either `development` or `production`.
 
 You can access the environment variable inside the theme files with `getenv "NODE_ENV"`. See the following example for a conditional statement:
 
     {{ if eq (getenv "NODE_ENV") "development" }}You're in development!{{ end }}
 
-All tasks starting with *build* set the environment variable to `production` - the other will set it to `development`.
+All tasks starting with _build_ set the environment variable to `production` - the other will set it to `development`.
 
 ## Deploying to Netlify
 
@@ -125,5 +113,4 @@ You can also click this button:
 
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/victor-hugo)
 
-
 ## Enjoy!! 😸

netlify.toml

@@ -7,4 +7,4 @@
   publish = "dist"
 
 [context.deploy-preview]
-  command = "npm run build-preview"
+  command = "npm run build:preview"