webpacker 1.0 → 1.1

data/lib/install/bin/webpack-dev-server.tt

@@ -1,22 +1,33 @@
 <%= shebang %>
+$stdout.sync = true
 
-RAILS_ENV = ENV['RAILS_ENV'] || 'development'
-NODE_ENV  = ENV['NODE_ENV'] || RAILS_ENV
+require "shellwords"
+require "yaml"
 
-APP_PATH = File.expand_path('../', __dir__)
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
 
-SET_NODE_PATH  = "NODE_PATH=#{APP_PATH}/node_modules"
-WEBPACKER_BIN  = "./node_modules/.bin/webpack-dev-server"
-WEBPACK_CONFIG = "#{APP_PATH}/config/webpack/#{NODE_ENV}.js"
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
 
-# Warn the user if the configuration is not set
-RAILS_ENV_CONFIG = File.join("config", "environments", "#{RAILS_ENV}.rb")
+APP_PATH    = File.expand_path("../", __dir__)
+CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
 
-# Look into the environment file for a non-commented variable declaration
-unless File.foreach(File.join(APP_PATH, RAILS_ENV_CONFIG)).detect { |line| line.match(/^\s*[^#]*config\.x\.webpacker\[\:dev_server_host\].*=/) }
-  puts "Warning: if you want to use webpack-dev-server, you need to tell Webpacker to serve asset packs from it. Please set config.x.webpacker[:dev_server_host] in #{RAILS_ENV_CONFIG}.\n\n"
+begin
+  paths = YAML.load(File.read(CONFIG_PATH))
+
+  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
+  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
+
+  WEBPACK_BIN       = "#{NODE_MODULES_PATH}/.bin/webpack-dev-server"
+  DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.server.js"
+rescue Errno::ENOENT, NoMethodError
+  puts "Configuration not found in config/webpacker/paths.yml."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
 end
 
 Dir.chdir(APP_PATH) do
-  exec "#{SET_NODE_PATH} #{WEBPACKER_BIN} --config #{WEBPACK_CONFIG} --content-base #{APP_PATH}/public/packs #{ARGV.join(" ")}"
+  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
+    "--config #{DEV_SERVER_CONFIG}"
 end

data/lib/install/bin/webpack-watcher.tt

@@ -1,5 +1,8 @@
 <%= shebang %>
 
+ENV['RAILS_ENV'] ||= 'development'
+ENV['NODE_ENV'] ||= ENV['RAILS_ENV']
+
 BIN_PATH = File.expand_path('.', __dir__)
 
 Dir.chdir(BIN_PATH) do

data/lib/install/bin/webpack.tt

@@ -1,14 +1,40 @@
 <%= shebang %>
+$stdout.sync = true
 
-RAILS_ENV = ENV['RAILS_ENV'] || 'development'
-NODE_ENV  = ENV['NODE_ENV'] || RAILS_ENV
+require "shellwords"
+require "yaml"
 
-APP_PATH = File.expand_path('../', __dir__)
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV   = ENV["RAILS_ENV"]
 
-SET_NODE_PATH  = "NODE_PATH=#{APP_PATH}/node_modules"
-WEBPACK_BIN    = "./node_modules/webpack/bin/webpack.js"
-WEBPACK_CONFIG = "#{APP_PATH}/config/webpack/#{NODE_ENV}.js"
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV    = ENV["NODE_ENV"]
+
+APP_PATH               = File.expand_path("../", __dir__)
+CONFIG_PATH            = File.join(APP_PATH, "config/webpack/paths.yml")
+DEV_SERVER_CONFIG_PATH = File.join(APP_PATH, "config/webpack/development.server.yml")
+
+begin
+  paths            = YAML.load(File.read(CONFIG_PATH))
+  dev_server = YAML.load(File.read(DEV_SERVER_CONFIG_PATH))
+
+  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
+  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
+
+  if NODE_ENV == "development" && dev_server["enabled"]
+    puts "Warning: webpack-dev-server is currently enabled in #{DEV_SERVER_CONFIG_PATH}. " \
+      "Disable to serve assets directly from public/packs directory"
+  end
+rescue Errno::ENOENT, NoMethodError
+  puts "Configuration not found in config/webpack/paths.yml or config/webpack/development.server.yml."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+WEBPACK_BIN    = "#{NODE_MODULES_PATH}/.bin/webpack"
+WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
 
 Dir.chdir(APP_PATH) do
-  exec "#{SET_NODE_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG} #{ARGV.join(" ")}"
+  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
+    " #{ARGV.join(" ")}"
 end

data/lib/install/config/.postcssrc.yml

@@ -0,0 +1,4 @@
+plugins:
+  postcss-smart-import: {}
+  precss: {}
+  autoprefixer: {}

data/lib/install/config/loaders/core/assets.js

@@ -0,0 +1,12 @@
+const { env, publicPath } = require('../configuration.js')
+
+module.exports = {
+  test: /\.(jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+  use: [{
+    loader: 'file-loader',
+    options: {
+      publicPath,
+      name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]'
+    }
+  }]
+}

data/lib/install/config/loaders/core/babel.js

@@ -0,0 +1,10 @@
+module.exports = {
+  test: /\.js(\.erb)?$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    presets: [
+      ['env', { modules: false }]
+    ]
+  }
+}

data/lib/install/config/loaders/core/coffee.js

@@ -0,0 +1,4 @@
+module.exports = {
+  test: /\.coffee(\.erb)?$/,
+  loader: 'coffee-loader'
+}

data/lib/install/config/loaders/core/erb.js

@@ -0,0 +1,9 @@
+module.exports = {
+  test: /\.erb$/,
+  enforce: 'pre',
+  exclude: /node_modules/,
+  loader: 'rails-erb-loader',
+  options: {
+    runner: 'DISABLE_SPRING=1 bin/rails runner'
+  }
+}

data/lib/install/config/loaders/core/sass.js

@@ -0,0 +1,9 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = {
+  test: /\.(scss|sass|css)$/i,
+  use: ExtractTextPlugin.extract({
+    fallback: 'style-loader',
+    use: ['css-loader', 'postcss-loader', 'sass-loader']
+  })
+}

data/lib/install/config/loaders/installers/angular.js

@@ -0,0 +1,4 @@
+module.exports = {
+  test: /.ts$/,
+  loader: 'ts-loader'
+}

data/lib/install/config/loaders/installers/react.js

@@ -0,0 +1,11 @@
+module.exports = {
+  test: /\.(js|jsx)?(\.erb)?$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    presets: [
+      'react',
+      ['env', { modules: false }]
+    ]
+  }
+}

data/lib/install/config/loaders/installers/vue.js

@@ -0,0 +1,10 @@
+module.exports = {
+  test: /.vue$/,
+  loader: 'vue-loader',
+  options: {
+    loaders: {
+      scss: 'vue-style-loader!css-loader!sass-loader',
+      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+    }
+  }
+}

data/lib/install/config/webpack/configuration.js

@@ -0,0 +1,21 @@
+// Common configuration for webpacker loaded from config/webpack/paths.yml
+
+const { join, resolve } = require('path')
+const { env } = require('process')
+const { safeLoad } = require('js-yaml')
+const { readFileSync } = require('fs')
+
+const configPath = resolve('config', 'webpack')
+const loadersDir = join(__dirname, 'loaders')
+const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))
+const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))
+const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ?
+  `http://${devServer.host}:${devServer.port}/` : `/${paths.entry}/`
+
+module.exports = {
+  devServer,
+  env,
+  paths,
+  loadersDir,
+  publicPath
+}

data/lib/install/config/webpack/development.js

@@ -0,0 +1,16 @@
+// Note: You must restart bin/webpack-watcher for changes to take effect
+
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {
+  devtool: 'sourcemap',
+
+  stats: {
+    errorDetails: true
+  },
+
+  output: {
+    pathinfo: true
+  }
+})

data/lib/install/config/webpack/development.server.js

@@ -0,0 +1,17 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+const { resolve } = require('path')
+const merge = require('webpack-merge')
+const devConfig = require('./development.js')
+const { devServer, publicPath, paths } = require('./configuration.js')
+
+module.exports = merge(devConfig, {
+  devServer: {
+    host: devServer.host,
+    port: devServer.port,
+    compress: true,
+    historyApiFallback: true,
+    contentBase: resolve(paths.output, paths.entry),
+    publicPath
+  }
+})

data/lib/install/config/webpack/development.server.yml

@@ -0,0 +1,4 @@
+# Restart webpack-dev-server if you make changes here
+enabled: true
+host: localhost
+port: 8080

data/lib/install/config/webpack/paths.yml

@@ -0,0 +1,19 @@
+# Restart webpack-watcher or webpack-dev-server if you make changes here
+config: config/webpack
+entry: packs
+output: public
+node_modules: node_modules
+source: app/javascript
+extensions:
+  - .coffee
+  - .js
+  - .jsx
+  - .ts
+  - .vue
+  - .sass
+  - .scss
+  - .css
+  - .png
+  - .svg
+  - .gif
+  - .jpeg

data/lib/install/config/webpack/production.js

@@ -0,0 +1,20 @@
+/* eslint global-require: 0 */
+// Note: You must run bin/webpack for changes to take effect
+
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const CompressionPlugin = require('compression-webpack-plugin')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {
+  output: { filename: '[name]-[chunkhash].js' },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin(),
+    new CompressionPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: /\.(js|css|svg|eot|ttf|woff|woff2)$/
+    })
+  ]
+})

data/lib/install/config/webpack/shared.js

@@ -0,0 +1,51 @@
+// Note: You must restart bin/webpack-watcher for changes to take effect
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const webpack = require('webpack')
+const { basename, join, resolve } = require('path')
+const { sync } = require('glob')
+const { readdirSync } = require('fs')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ManifestPlugin = require('webpack-manifest-plugin')
+const extname = require('path-complete-extname')
+const { env, paths, publicPath, loadersDir } = require('./configuration.js')
+
+const extensionGlob = `*{${paths.extensions.join(',')}}*`
+const packPaths = sync(join(paths.source, paths.entry, extensionGlob))
+
+module.exports = {
+  entry: packPaths.reduce(
+    (map, entry) => {
+      const localMap = map
+      localMap[basename(entry, extname(entry))] = resolve(entry)
+      return localMap
+    }, {}
+  ),
+
+  output: { filename: '[name].js', path: resolve(paths.output, paths.entry) },
+
+  module: {
+    rules: readdirSync(loadersDir).map(file => (
+      require(join(loadersDir, file))
+    ))
+  },
+
+  plugins: [
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
+    new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
+    new ManifestPlugin({ fileName: 'manifest.json', publicPath, writeToFileEmit: true })
+  ],
+
+  resolve: {
+    extensions: paths.extensions,
+    modules: [
+      resolve(paths.source),
+      resolve(paths.node_modules)
+    ]
+  },
+
+  resolveLoader: {
+    modules: [paths.node_modules]
+  }
+}

data/lib/install/{angular → examples/angular}/hello_angular.js

@@ -4,4 +4,4 @@
 //
 // <%= javascript_pack_tag 'hello_angular' %>
 
-require("hello_angular")
+require('../hello_angular')

data/lib/install/examples/react/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}

data/lib/install/examples/react/hello_react.jsx

@@ -0,0 +1,25 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: React.PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

data/lib/install/examples/vue/app.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  data: function () {
+    return {
+      message: "Hello Vue!"
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

data/lib/install/examples/vue/hello_vue.js

@@ -0,0 +1,19 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %>
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Vue</div> at the bottom of the page.
+
+import Vue from 'vue/dist/vue.esm'
+import App from './app.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.body.appendChild(document.createElement('hello'))
+  const app = new Vue({
+    el: 'hello',
+    template: '<App/>',
+    components: { App }
+  })
+
+  console.log(app)
+})