webpacker 1.1 → 1.2

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

@@ -1,7 +1,7 @@
 const { env, publicPath } = require('../configuration.js')
 
 module.exports = {
-  test: /\.(jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
   use: [{
     loader: 'file-loader',
     options: {

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

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

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

@@ -4,6 +4,6 @@ module.exports = {
   exclude: /node_modules/,
   loader: 'rails-erb-loader',
   options: {
-    runner: 'DISABLE_SPRING=1 bin/rails runner'
+    runner: 'bin/rails runner'
   }
 }

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

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

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

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

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

@@ -3,8 +3,10 @@ module.exports = {
   loader: 'vue-loader',
   options: {
     loaders: {
-      scss: 'vue-style-loader!css-loader!sass-loader',
-      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+      js: 'babel-loader',
+      file: 'file-loader',
+      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
+      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
     }
   }
 }

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

@@ -7,15 +7,20 @@ 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}/`
+const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
+const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
+
+// Compute public path based on environment and ASSET_HOST in production
+const ifHasCDN = env.ASSET_HOST !== undefined && env.NODE_ENV === 'production'
+const devServerUrl = `http://${devServer.host}:${devServer.port}/${paths.entry}/`
+const publicUrl = ifHasCDN ? `${env.ASSET_HOST}/${paths.entry}/` : `/${paths.entry}/`
+const publicPath = env.NODE_ENV !== 'production' ? devServerUrl : publicUrl
 
 module.exports = {
   devServer,
   env,
   paths,
   loadersDir,
+  publicUrl,
   publicPath
 }

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

@@ -1,4 +1,4 @@
-// Note: You must restart bin/webpack-watcher for changes to take effect
+// Note: You must restart bin/webpack-dev-server for changes to take effect
 
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')

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

@@ -1,4 +1,17 @@
-# Restart webpack-dev-server if you make changes here
-enabled: true
-host: localhost
-port: 8080
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  enabled: true
+  host: localhost
+  port: 8080
+
+development:
+  <<: *default
+
+test:
+  <<: *default
+  enabled: false
+
+production:
+  <<: *default
+  enabled: false

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

@@ -1,19 +1,33 @@
-# 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
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  config: config/webpack
+  entry: packs
+  output: public
+  manifest: manifest.json
+  node_modules: node_modules
+  source: app/javascript
+  extensions:
+    - .coffee
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+
+test:
+  <<: *default
+  manifest: manifest-test.json
+
+production:
+  <<: *default

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

@@ -1,5 +1,6 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
 /* eslint global-require: 0 */
-// Note: You must run bin/webpack for changes to take effect
 
 const webpack = require('webpack')
 const merge = require('webpack-merge')

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

@@ -1,40 +1,43 @@
-// Note: You must restart bin/webpack-watcher for changes to take effect
+// Note: You must restart bin/webpack-dev-server 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 { basename, dirname, join, relative, 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 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)
+      const namespace = relative(join(paths.source, paths.entry), dirname(entry))
+      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
       return localMap
     }, {}
   ),
 
-  output: { filename: '[name].js', path: resolve(paths.output, paths.entry) },
+  output: {
+    filename: '[name].js',
+    path: resolve(paths.output, paths.entry),
+    publicPath
+  },
 
   module: {
-    rules: readdirSync(loadersDir).map(file => (
-      require(join(loadersDir, file))
-    ))
+    rules: sync(join(loadersDir, '*.js')).map(loader => require(loader))
   },
 
   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 })
+    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true })
   ],
 
   resolve: {

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

@@ -0,0 +1,6 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {})

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

@@ -1,3 +1,6 @@
 {
-  "presets": ["env", "react"]
+  "presets": [
+    ["env", { "modules": false } ],
+    "react"
+  ]
 }

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

@@ -4,6 +4,7 @@
 
 import React from 'react'
 import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
 
 const Hello = props => (
   <div>Hello {props.name}!</div>
@@ -14,7 +15,7 @@ Hello.defaultProps = {
 }
 
 Hello.propTypes = {
-  name: React.PropTypes.string
+  name: PropTypes.string
 }
 
 document.addEventListener('DOMContentLoaded', () => {

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-module.exports = {
+export default {
   data: function () {
     return {
       message: "Hello Vue!"

data/lib/install/react.rb

@@ -1,15 +1,31 @@
 require "webpacker/configuration"
 
+babelrc = Rails.root.join(".babelrc")
+
+if File.exist?(babelrc)
+  react_babelrc = JSON.parse(File.read(babelrc))
+  react_babelrc["presets"] ||= []
+
+  unless react_babelrc["presets"].include?("react")
+    react_babelrc["presets"].push("react")
+    puts "Copying react preset to your .babelrc file"
+
+    File.open(babelrc, "w") do |f|
+      f.puts JSON.pretty_generate(react_babelrc)
+    end
+  end
+else
+  puts "Copying .babelrc to app root directory"
+  copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
+end
+
 puts "Copying react loader to #{Webpacker::Configuration.config_path}/loaders"
 copy_file "#{__dir__}/config/loaders/installers/react.js", "config/webpack/loaders/react.js"
 
-puts "Copying .babelrc to app root directory"
-copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
-
 puts "Copying react example entry file to #{Webpacker::Configuration.entry_path}"
 copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker::Configuration.entry_path}/hello_react.jsx"
 
 puts "Installing all react dependencies"
-run "./bin/yarn add react react-dom babel-preset-react"
+run "./bin/yarn add react react-dom babel-preset-react prop-types"
 
 puts "Webpacker now supports react.js 🎉"

data/lib/install/template.rb

@@ -1,24 +1,36 @@
 # Install webpacker
-puts "Creating javascript app source directory"
-directory "#{__dir__}/javascript", "app/javascript"
-
-puts "Copying binstubs"
-directory "#{__dir__}/bin", "bin"
-chmod "bin", 0755 & ~File.umask, verbose: false
-
 puts "Copying webpack core config and loaders"
 directory "#{__dir__}/config/webpack", "config/webpack"
 directory "#{__dir__}/config/loaders/core", "config/webpack/loaders"
 copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
 
-append_to_file ".gitignore", <<-EOS
+puts "Copying .babelrc to app root directory"
+copy_file "#{__dir__}/config/.babelrc", ".babelrc"
+
+puts "Creating javascript app source directory"
+directory "#{__dir__}/javascript", "#{Webpacker::Configuration.source}"
+
+puts "Copying binstubs"
+template "#{__dir__}/bin/webpack-dev-server", "bin/webpack-dev-server"
+template "#{__dir__}/bin/webpack", "bin/webpack"
+
+if !File.exist?("bin/yarn")
+  puts "Copying yarn"
+  template "#{__dir__}/bin/yarn", "bin/yarn"
+end
+
+chmod "bin", 0755 & ~File.umask, verbose: false
+
+if File.exists?(".gitignore")
+  append_to_file ".gitignore", <<-EOS
 /public/packs
 /node_modules
 EOS
+end
 
 puts "Installing all JavaScript dependencies"
 run "./bin/yarn add webpack webpack-merge js-yaml path-complete-extname " \
-"webpack-manifest-plugin babel-loader coffee-loader coffee-script " \
+"webpack-manifest-plugin babel-loader@7.x coffee-loader coffee-script " \
 "babel-core babel-preset-env compression-webpack-plugin rails-erb-loader glob " \
 "extract-text-webpack-plugin node-sass file-loader sass-loader css-loader style-loader " \
 "postcss-loader autoprefixer postcss-smart-import precss"

data/lib/install/vue.rb

@@ -10,6 +10,6 @@ puts "Copying vue app file to #{Webpacker::Configuration.entry_path}"
 copy_file "#{__dir__}/examples/vue/app.vue", "#{Webpacker::Configuration.entry_path}/app.vue"
 
 puts "Installing all vue dependencies"
-run "./bin/yarn add vue vue-loader vue-template-compiler sass-loader node-sass css-loader"
+run "./bin/yarn add vue vue-loader vue-template-compiler"
 
 puts "Webpacker now supports vue.js 🎉"

data/lib/tasks/installers.rake

@@ -11,9 +11,9 @@ namespace :webpacker do
       task task_name => ["webpacker:verify_install"] do
         template = File.expand_path("../install/#{task_name}.rb", __dir__)
         if Rails::VERSION::MAJOR >= 5
-          exec "./bin/rails app:template LOCATION=#{template}"
+          exec "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{template}"
         else
-          exec "./bin/rake rails:template LOCATION=#{template}"
+          exec "#{RbConfig.ruby} ./bin/rake rails:template LOCATION=#{template}"
         end
       end
     end

data/lib/tasks/webpacker.rake

@@ -1,6 +1,8 @@
 tasks = {
   "webpacker:install"         => "Installs and setup webpack with yarn",
   "webpacker:compile"         => "Compiles webpack bundles based on environment",
+  "webpacker:check_node"      => "Verifies if Node.js is installed",
+  "webpacker:check_yarn"      => "Verifies if yarn is installed",
   "webpacker:verify_install"  => "Verifies if webpacker is installed",
   "webpacker:yarn_install"    => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn",
   "webpacker:install:react"   => "Installs and setup example react component",

data/lib/tasks/webpacker/check_node.rake

@@ -0,0 +1,19 @@
+namespace :webpacker do
+  desc "Verifies if Node.js is installed"
+  task :check_node do
+    begin
+      node_version = `node -v`
+      required_node_version = "6.4"
+
+      raise Errno::ENOENT if node_version.blank?
+      if Gem::Version.new(node_version.strip.tr("v", "")) < Gem::Version.new(required_node_version)
+        puts "Webpacker requires Node.js >= v#{required_node_version} and you are using #{node_version}"
+        puts "Please upgrade Node.js https://nodejs.org/en/download/"
+        puts "Exiting!" && exit!
+      end
+    rescue Errno::ENOENT
+      puts "Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/"
+      puts "Exiting!" && exit!
+    end
+  end
+end

data/lib/tasks/webpacker/check_yarn.rake

@@ -0,0 +1,12 @@
+namespace :webpacker do
+  desc "Verifies if yarn is installed"
+  task :check_yarn do
+    begin
+      version = `yarn --version`
+      raise Errno::ENOENT if version.blank?
+    rescue Errno::ENOENT
+      puts "Webpacker requires yarn. Please download and install Yarn https://yarnpkg.com/lang/en/docs/install/"
+      puts "Exiting!" && exit!
+    end
+  end
+end

data/lib/tasks/webpacker/clobber.rake

@@ -0,0 +1,17 @@
+require "webpacker/configuration"
+
+namespace :webpacker do
+  desc "Remove the webpack compiled output directory"
+  task clobber: ["webpacker:verify_install", :environment] do
+    packs_path = Webpacker::Configuration.packs_path
+    FileUtils.rm_r(packs_path) if File.exist?(packs_path)
+    puts "Removed webpack output path directory #{packs_path}"
+  end
+end
+
+# Run clobber if the assets:clobber is run
+if Rake::Task.task_defined?("assets:clobber")
+  Rake::Task["assets:clobber"].enhance do
+    Rake::Task["webpacker:clobber"].invoke
+  end
+end