webpacker 2.0 → 3.0.0

data/lib/install/bin/webpack.tt

@@ -2,7 +2,6 @@
 $stdout.sync = true
 
 require "shellwords"
-require "yaml"
 
 ENV["RAILS_ENV"] ||= "development"
 RAILS_ENV = ENV["RAILS_ENV"]
@@ -20,9 +19,9 @@ unless File.exist?(WEBPACK_CONFIG)
   exit!
 end
 
-newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
-cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmd = [ "#{NODE_MODULES_PATH}/.bin/webpack", "--config", WEBPACK_CONFIG ] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec newenv, *cmdline
+  exec env, *cmd
 end

data/lib/install/config/.babelrc

@@ -12,6 +12,7 @@
 
   "plugins": [
     "syntax-dynamic-import",
+    "transform-object-rest-spread",
     ["transform-class-properties", { "spec": true }]
   ]
 }

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

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

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

@@ -1,32 +1,3 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+const environment = require('./environment')
 
-const merge = require('webpack-merge')
-const sharedConfig = require('./shared.js')
-const { settings, output } = require('./configuration.js')
-
-module.exports = merge(sharedConfig, {
-  devtool: 'cheap-eval-source-map',
-
-  stats: {
-    errorDetails: true
-  },
-
-  output: {
-    pathinfo: true
-  },
-
-  devServer: {
-    clientLogLevel: 'none',
-    https: settings.dev_server.https,
-    host: settings.dev_server.host,
-    port: settings.dev_server.port,
-    contentBase: output.path,
-    publicPath: output.publicPath,
-    compress: true,
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    historyApiFallback: true,
-    watchOptions: {
-      ignored: /node_modules/
-    }
-  }
-})
+module.exports = environment.toWebpackConfig()

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

@@ -0,0 +1,3 @@
+const { environment } = require('@rails/webpacker')
+
+module.exports = environment

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

@@ -1,35 +1,3 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+const environment = require('./environment')
 
-/* eslint global-require: 0 */
-
-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' },
-  devtool: 'source-map',
-  stats: 'normal',
-
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      minimize: true,
-      sourceMap: true,
-
-      compress: {
-        warnings: false
-      },
-
-      output: {
-        comments: false
-      }
-    }),
-
-    new CompressionPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
-    })
-  ]
-})
+module.exports = environment.toWebpackConfig()

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

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

data/lib/install/config/webpacker.yml

@@ -4,6 +4,14 @@ default: &default
   source_path: app/javascript
   source_entry_path: packs
   public_output_path: packs
+  cache_path: tmp/cache/webpacker
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
 
   extensions:
     - .coffee
@@ -23,16 +31,26 @@ default: &default
 
 development:
   <<: *default
+  compile: true
 
   dev_server:
-    host: 0.0.0.0
-    port: 8080
+    host: localhost
+    port: 3035
+    hmr: false
     https: false
 
 test:
   <<: *default
+  compile: true
 
+  # Compile test packs to a separate directory
   public_output_path: packs-test
 
 production:
   <<: *default
+
+  # Production demands on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true

data/lib/install/elm.rb

@@ -1,15 +1,11 @@
 require "webpacker/configuration"
 
-puts "Copying elm loader to config/webpack/loaders"
-copy_file "#{__dir__}/config/loaders/installers/elm.js",
-          "config/webpack/loaders/elm.js"
+puts "Copying elm example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/elm/Main.elm", "#{Webpacker.config.source_entry_path}/Main.elm"
 
-puts "Copying elm example entry file to #{Webpacker::Configuration.entry_path}"
-copy_file "#{__dir__}/examples/elm/Main.elm", "#{Webpacker::Configuration.entry_path}/Main.elm"
-
-puts "Copying elm app file to #{Webpacker::Configuration.entry_path}"
+puts "Copying elm app file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/elm/hello_elm.js",
-          "#{Webpacker::Configuration.entry_path}/hello_elm.js"
+          "#{Webpacker.config.source_entry_path}/hello_elm.js"
 
 puts "Installing all elm dependencies"
 run "yarn add elm elm-webpack-loader"
@@ -17,11 +13,10 @@ run "yarn add --dev elm-hot-loader"
 run "yarn run elm package install -- --yes"
 
 puts "Updating Webpack paths to include Elm file extension"
-insert_into_file Webpacker::Configuration.file_path, "    - .elm\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "    - .elm\n", after: /extensions:\n/
 
 puts "Updating elm source location"
-source_path = File.join(Webpacker::Configuration.source, Webpacker::Configuration.fetch(:source_entry_path))
-gsub_file "elm-package.json", /\"\.\"\n/, %("#{source_path}"\n)
+gsub_file "elm-package.json", /\"\.\"\n/, %("#{Webpacker.config.source_entry_path}"\n)
 
 puts "Updating .gitignore to include elm-stuff folder"
 insert_into_file ".gitignore", "/elm-stuff\n", before: "/node_modules\n"

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

@@ -1,6 +1,7 @@
 /* eslint no-console: 0 */
-// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> and
-// <%= stylesheet_pack_tag 'hello_vue' %> to the head of your layout file,
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
+// <%= stylesheet_pack_tag 'hello_vue' %> if you set extractStyles to true
+// in config/webpack/loaders/vue.js) 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.
 
@@ -13,3 +14,31 @@ document.addEventListener('DOMContentLoaded', () => {
 
   console.log(app)
 })
+
+
+// The above code uses Vue without the compiler, which means you cannot
+// use Vue to target elements in your existing html templates. You would
+// need to always use single file components.
+// To be able to target elements in your existing html/erb templates,
+// comment out the above code and uncomment the below
+// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
+// Then add this markup to your html template:
+//
+// <div id='hello'>
+//   {{message}}
+//   <app></app>
+// </div>
+
+
+// import Vue from 'vue/dist/vue.esm'
+// import App from './app.vue'
+//
+// document.addEventListener('DOMContentLoaded', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: {
+//       message: "Can you say hello?"
+//     },
+//     components: { App }
+//   })
+// })

data/lib/install/react.rb

@@ -19,11 +19,8 @@ else
   copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
 end
 
-puts "Copying react loader to config/webpack/loaders"
-copy_file "#{__dir__}/config/loaders/installers/react.js", "config/webpack/loaders/react.js"
-
-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 "Copying react example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"
 
 puts "Installing all react dependencies"
 run "yarn add react react-dom babel-preset-react prop-types"

data/lib/install/template.rb

@@ -3,7 +3,6 @@ copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
 
 puts "Copying webpack core config and loaders"
 directory "#{__dir__}/config/webpack", "config/webpack"
-directory "#{__dir__}/config/loaders/core", "config/webpack/loaders"
 
 puts "Copying .postcssrc.yml to app root directory"
 copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
@@ -12,7 +11,7 @@ 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}"
+directory "#{__dir__}/javascript", Webpacker.config.source_path
 
 puts "Copying binstubs"
 directory "#{__dir__}/bin", "bin"
@@ -22,17 +21,13 @@ chmod "bin", 0755 & ~File.umask, verbose: false
 if File.exists?(".gitignore")
   append_to_file ".gitignore", <<-EOS
 /public/packs
+/public/packs-test
 /node_modules
 EOS
 end
 
 puts "Installing all JavaScript dependencies"
-run "yarn add webpack webpack-merge js-yaml path-complete-extname " \
-"webpack-manifest-plugin babel-loader@7.x coffee-loader coffee-script " \
-"babel-core babel-preset-env babel-polyfill 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 resolve-url-loader " \
-"babel-plugin-syntax-dynamic-import babel-plugin-transform-class-properties"
+run "yarn add @rails/webpacker"
 
 puts "Installing dev server for live reloading"
 run "yarn add --dev webpack-dev-server"

data/lib/install/vue.rb

@@ -1,13 +1,10 @@
 require "webpacker/configuration"
 
-puts "Copying vue loader to config/webpack/loaders"
-copy_file "#{__dir__}/config/loaders/installers/vue.js", "config/webpack/loaders/vue.js"
+puts "Copying the example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/vue/hello_vue.js", "#{Webpacker.config.source_entry_path}/hello_vue.js"
 
-puts "Copying the example entry file to #{Webpacker::Configuration.entry_path}"
-copy_file "#{__dir__}/examples/vue/hello_vue.js", "#{Webpacker::Configuration.entry_path}/hello_vue.js"
-
-puts "Copying vue app file to #{Webpacker::Configuration.entry_path}"
-copy_file "#{__dir__}/examples/vue/app.vue", "#{Webpacker::Configuration.entry_path}/app.vue"
+puts "Copying vue app file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/vue/app.vue", "#{Webpacker.config.source_entry_path}/app.vue"
 
 puts "Installing all vue dependencies"
 run "yarn add vue vue-loader vue-template-compiler"

data/lib/tasks/webpacker.rake

@@ -3,7 +3,7 @@ tasks = {
   "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:check_webpack_binstubs"  => "Verifies that bin/webpack & bin/webpack-dev-server are present",
+  "webpacker:check_binstubs"          => "Verifies that bin/webpack & bin/webpack-dev-server are present",
   "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_webpack_binstubs.rake → check_binstubs.rake}

@@ -1,8 +1,9 @@
 namespace :webpacker do
   desc "Verifies that bin/webpack & bin/webpack-dev-server are present."
-  task :check_webpack_binstubs do
+  task :check_binstubs do
     unless File.exist?("bin/webpack") && File.exist?("bin/webpack-dev-server")
-      puts "Webpack binstubs not found.\n"\
+      $stderr.puts "Webpack binstubs not found.\n"\
+           "Have you run rails webpacker:install ?\n"\
            "Make sure the bin directory or binstubs are not included in .gitignore\n"\
            "Exiting!"
       exit!

data/lib/tasks/webpacker/check_node.rake

@@ -3,17 +3,19 @@ namespace :webpacker do
   task :check_node do
     begin
       node_version = `node -v`
-      required_node_version = "6.4"
+      node_version = `nodejs -v` if node_version.blank?
+      required_node_version = "6.0"
 
       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!
+        $stderr.puts "Webpacker requires Node.js >= v#{required_node_version} and you are using #{node_version}"
+        $stderr.puts "Please upgrade Node.js https://nodejs.org/en/download/"
+        $stderr.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!
+      $stderr.puts "Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/"
+      $stderr.puts "Exiting!" && exit!
     end
   end
 end

data/lib/tasks/webpacker/check_yarn.rake

@@ -8,8 +8,8 @@ namespace :webpacker do
 
       raise Errno::ENOENT if yarn_version.blank? || Gem::Version.new(yarn_version) < Gem::Version.new(required_yarn_version)
     rescue Errno::ENOENT
-      puts "Webpacker requires Yarn version >= #{required_yarn_version}. Please download and install the latest version from https://yarnpkg.com/lang/en/docs/install/"
-      puts "Exiting!" && exit!
+      $stderr.puts "Webpacker requires Yarn version >= #{required_yarn_version}. Please download and install the latest version from https://yarnpkg.com/lang/en/docs/install/"
+      $stderr.puts "Exiting!" && exit!
     end
   end
 end

data/lib/tasks/webpacker/clobber.rake

@@ -3,9 +3,8 @@ require "webpacker/configuration"
 namespace :webpacker do
   desc "Remove the webpack compiled output directory"
   task clobber: ["webpacker:verify_install", :environment] do
-    output_path = Webpacker::Configuration.output_path
-    FileUtils.rm_r(output_path) if File.exist?(output_path)
-    puts "Removed webpack output path directory #{output_path}"
+    Webpacker.clobber
+    $stdout.puts "Removed webpack output path directory #{Webpacker.config.public_output_path}"
   end
 end
 

data/lib/tasks/webpacker/compile.rake

@@ -1,25 +1,23 @@
-require "open3"
-require "webpacker/env"
-require "webpacker/configuration"
+$stdout.sync = true
+
+def ensure_log_goes_to_stdout
+  old_logger = Webpacker.logger
+  Webpacker.logger = ActiveSupport::Logger.new(STDOUT)
+  yield
+ensure
+  Webpacker.logger = old_logger
+end
 
 namespace :webpacker do
   desc "Compile javascript packs using webpack for production with digests"
   task compile: ["webpacker:verify_install", :environment] do
-    puts "[Webpacker] Compiling assets 🎉"
-
-    asset_host = ActionController::Base.helpers.compute_asset_host
-    env = { "NODE_ENV" => Webpacker.env, "ASSET_HOST" => asset_host }.freeze
-
-    stdout_str, stderr_str, status = Open3.capture3(env, "./bin/webpack")
-
-    if status.success?
-      $stdout.puts "\e[32m[Webpacker] Compiled digests for all packs in #{Webpacker::Configuration.entry_path}:\e[0m"
-      $stdout.puts "\e[32m#{JSON.parse(File.read(Webpacker::Configuration.manifest_path))}\e[0m"
-    else
-      $stdout.puts "[Webpacker] Compilation Failed"
-      $stdout.puts "\e[31m#{stdout_str}\e[0m"
-      $stderr.puts "\e[31m#{stderr_str}\e[0m"
-      exit!
+    ensure_log_goes_to_stdout do
+      if Webpacker.compile
+        # Successful compilation!
+      else
+        # Failed compilation
+        exit!
+      end
     end
   end
 end

data/lib/tasks/webpacker/verify_install.rake

@@ -2,12 +2,12 @@ require "webpacker/configuration"
 
 namespace :webpacker do
   desc "Verifies if webpacker is installed"
-  task verify_install: [:check_node, :check_yarn, :check_webpack_binstubs] do
-    if File.exist?(Webpacker::Configuration.file_path)
-      puts "Webpacker is installed 🎉 🍰"
-      puts "Using #{Webpacker::Configuration.file_path} file for setting up webpack paths"
+  task verify_install: [:check_node, :check_yarn, :check_binstubs] do
+    if Webpacker.config.config_path.exist?
+      $stdout.puts "Webpacker is installed 🎉 🍰"
+      $stdout.puts "Using #{Webpacker.config.config_path} file for setting up webpack paths"
     else
-      puts "Configuration config/webpacker.yml file not found. \n"\
+      $stderr.puts "Configuration config/webpacker.yml file not found. \n"\
            "Make sure webpacker:install is run successfully before " \
            "running dependent tasks"
       exit!