Update Webpack implementation

.gitignore

@@ -1 +1,3 @@
 /Gemfile.lock
+/lib/generators/npm_pipeline/*/vendor
+/lib/generators/npm_pipeline/*/node_modules

README.md

@@ -6,10 +6,10 @@ npm-pipeline-rails allows you to use any toolchain to bulid your asset files in
 
 - Use [Brunch][] with Rails ([instructions](docs/brunch.md))
 - Use [Gulp][] with Rails ([instructions](docs/gulp.md))
+- Use [Webpack][] with Rails ([instructions](docs/webpack.md))
 - Use [Grunt][] with Rails
 - Use [Browserify][] with Rails
 - Use [Broccoli][] with Rails
-- Use [Webpack][] with Rails
 - Use any other asset tool with Rails
 
 [Rails]: http://rubyonrails.org/
@@ -44,6 +44,7 @@ Use the generators for your preferred build tool:
 
 - __[Brunch](docs/brunch.md)__ - `./bin/rails generate npm_pipeline:brunch`
 - __[Gulp](docs/gulp.md)__ - `./bin/rails generate npm_pipeline:gulp`
+- __[Webpack](docs/webpack.md)__ - `./bin/rails generate npm_pipeline:webpack`
 
 #### Manual setup
 

docs/webpack.md

@@ -0,0 +1,88 @@
+# Webpack integration
+
+Run this to set your project up with a simple Webpack config.
+
+```sh
+./bin/rails generate npm_pipeline:webpack
+```
+
+This configuration includes:
+
+- [babel-loader](https://www.npmjs.com/package/babel-loader) for evergreen `.js` support
+- [postcss-loader](https://www.npmjs.com/package/postcss-loader) with:
+  - [autoprefixer](https://www.npmjs.com/package/autoprefixer)
+  - [postcss-asset-url-rails](https://www.npmjs.com/package/postcss-asset-url-rails) for `image-url()` support
+- [sass-loader](https://www.npmjs.com/package/sass-loader) for Sass support
+- [extract-text-webpack-plugin](https://www.npmjs.com/package/extract-text-webpack-plugin) for `.css` file support
+
+## Manual setup
+
+If you don't want to use the generator, here's what it does.
+
+#### package.json
+
+> Set up `webpack` (et al) and some basic Webpack plugins.
+
+```sh
+npm init --yes
+npm install --save-dev --save-exact webpack style-loader css-loader extract-text-webpack-plugin
+```
+
+You also need to set the `start` and `build` scripts.
+
+```js
+/* package.json */
+"scripts": {
+  "start": "webpack --progress --colors --watch",
+  "build": "webpack --progress --colors"
+}
+```
+
+_See:_ [sample package.json](../lib/generators/npm_pipeline/webpack/package.json)
+
+#### webpack.config.js
+
+> Set it up to watch source files in `app/webpack`, then put built files into `vendor/assets`.
+
+_See:_ [sample webpack.config.js](../lib/generators/npm_pipeline/webpack/webpack.config.js),
+[simplified webpack.config.js](../lib/generators/npm_pipeline/webpack/simple-webpack.config.js)
+
+#### .gitignore
+
+> Set it up to ignore Webpack's built files.
+
+```
+/node_modules
+/vendor/assets/stylesheets/webpack
+/vendor/assets/javascripts/webpack
+```
+
+#### app/assets/stylesheets/application.css
+
+> Set it up to include Webpack's built files. This will load from `vendor/assets/stylesheets/webpack/app.css`, as built by webpack.
+
+```css
+/*
+ *= require webpack/app
+ */
+```
+
+#### app/assets/javascripts/application.js
+
+> Set it up to include Webpack's built files. This will load from `vendor/assets/javascripts/webpack/app.js`, as built by webpack.
+
+```css
+//= require webpack/app
+```
+
+#### app/webpack/
+
+> Put your source files into `app/webpack`. For instance:
+
+* `app/webpack/app.js`
+
+  ```js
+  alert('it works!')
+  ```
+
+Be sure to point the proper `entry` points in the Webpack config.

lib/generators/npm_pipeline/webpack/app/webpack/css/app.js

@@ -0,0 +1,4 @@
+// http://stackoverflow.com/a/30652110/873870
+function requireAll (r) { r.keys().forEach(r) }
+
+requireAll(require.context('./components/', true, /\.scss$/))

lib/generators/npm_pipeline/webpack/app/webpack/css/components/example.scss

@@ -0,0 +1 @@
+html:before { content: 'Webpack assets added successfully! See app/webpack/css/.'; display: block; padding: 20px; background: #ffc; color: #111; position: fixed; top: 16px; right: 16px; max-width: 600px; z-index: 10000; font-family: sans-serif; font-size: 14px; line-height: 1.6; }

lib/generators/npm_pipeline/webpack/app/webpack/js/app.js

@@ -0,0 +1,4 @@
+// http://stackoverflow.com/a/30652110/873870
+function requireAll (r) { r.keys().forEach(r) }
+
+requireAll(require.context('./behaviors/', true, /\.js$/))

lib/generators/npm_pipeline/webpack/app/webpack/js/behaviors/example.js

@@ -0,0 +1 @@
+alert('Webpack works!')

lib/generators/npm_pipeline/webpack/package.json

@@ -21,5 +21,8 @@
     "sass-loader": "4.1.0",
     "style-loader": "0.13.1",
     "webpack": "1.14.0"
+  },
+  "dependencies": {
+    "css-loader": "0.26.1"
   }
 }

lib/generators/npm_pipeline/webpack/simple-webpack.config.js

@@ -0,0 +1,41 @@
+/*
+ * Simple Webpack config.
+ * This has no Babel or PostCSS support.
+ */
+
+var webpack = require('webpack')
+var join = require('path').join
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = {
+  context: __dirname,
+  entry: {
+    // JavaScript
+    'javascripts/webpack/app': ['./app/webpack/js/app.js'],
+
+    // Stylesheets
+    'stylesheets/webpack/app': ['./app/webpack/css/app/app.js']
+  },
+
+  output: {
+    path: join(__dirname, 'vendor/assets'),
+    filename: '[name].js',
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url&sourceMap')
+      }
+    ],
+  },
+
+  resolve: {
+    extensions: ['', '.js']
+  },
+
+  plugins: [
+    new ExtractTextPlugin('[name].css.erb')
+  ]
+}

lib/generators/npm_pipeline/webpack/webpack.config.js

@@ -1,3 +1,7 @@
+/*
+ * Webpack config with Babel, Sass and PostCSS support.
+ */
+
 var webpack = require('webpack')
 var join = require('path').join
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
@@ -6,10 +10,10 @@ module.exports = {
   context: __dirname,
   entry: {
     // JavaScript
-    'javascripts/webpack/app': ['./app/webpack/js/app.js'],
+    'javascripts/webpack/app': './app/webpack/js/app.js',
 
     // Stylesheets
-    'stylesheets/webpack/app': ['./app/webpack/css/app/app.js']
+    'stylesheets/webpack/app': './app/webpack/css/app.js'
   },
 
   output: {