webpacker 4.0.2 → 4.0.3

data/docs/deployment.md

@@ -83,3 +83,19 @@ Make sure you have `public/packs` and `node_modules` in `:linked_dirs`
 append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "public/packs", ".bundle", "node_modules"
 ```
 
+If you have `node_modules` added to `:linked_dirs` you'll need to run yarn install before `deploy:assets:precompile`, so you can add this code snippet at the bottom deploy.rb
+
+```ruby
+before "deploy:assets:precompile", "deploy:yarn_install"
+namespace :deploy do
+  desc "Run rake yarn install"
+  task :yarn_install do
+    on roles(:web) do
+      within release_path do
+        execute("cd #{release_path} && yarn install --silent --no-progress --no-audit --no-optional")
+      end
+    end
+  end
+end
+```
+

data/docs/engines.md

@@ -21,6 +21,8 @@ There is no built-in tasks to install Webpacker within the engine, thus you have
 
 ## Step 3: configure Webpacker instance.
 
+- File `lib/my_engine.rb`
+
 ```ruby
 module MyEngine
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
@@ -38,6 +40,8 @@ end
 
 ## Step 4: Configure dev server proxy.
 
+- File `lib/my_engine/engine.rb`
+
 ```ruby
 module MyEngine
   class Engine < ::Rails::Engine
@@ -73,6 +77,8 @@ development:
 
 ## Step 5: configure helper.
 
+- File `app/helpers/my_engine/application_helper.rb`
+
 ```ruby
 require "webpacker/helper"
 
@@ -93,6 +99,8 @@ Now you can use `stylesheet_pack_tag` and `javascript_pack_tag` from within your
 
 Add Rake task to compile assets in production (`rake my_engine:webpacker:compile`)
 
+- File `lib/tasks/my_engine_tasks.rake`
+
 ```ruby
 namespace :my_engine do
   namespace :webpacker do

data/docs/es6.md

@@ -16,13 +16,14 @@ Following ES6/7 features are supported out of the box:
 * Dynamic import() - useful for route level code-splitting
 * Class Fields and Static Properties.
 
-We have also included [babel polyfill](https://babeljs.io/docs/usage/polyfill/)
-that includes a custom regenerator runtime and core-js.
+We have also included [core-js](https://github.com/zloirock/core-js) to polyfill features in the
+older browsers.
 
-Don't forget to import `@babel/polyfill` in your main entry point like so:
+Don't forget to add these lines into your main entry point:
 
 ```js
-import "@babel/polyfill"
+import "core-js/stable";
+import "regenerator-runtime/runtime";
 ```
 
 

data/docs/troubleshooting.md

@@ -1,5 +1,14 @@
 # Troubleshooting
 
+## Debugging your webpack config
+
+1. Read the error message carefully. The error message will tell you the precise key value
+   that is not matching what Webpack expects.
+2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug`. 
+   If you have a node debugger installed, you'll see the Chrome debugger for your webpack
+   config. For example, install the Chrome extension [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and 
+   set the option for the dev tools to open automatically. For more details on debugging,
+   see the official [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
 
 ## ENOENT: no such file or directory - node-sass
 

data/docs/v4-upgrade.md

@@ -5,7 +5,7 @@ To update a Webpacker v3.5 app to v4, follow these steps:
 
 1. Update the `webpacker` gem and the `@rails/webpacker` package to v4. This will upgrade Webpack itself from 3.x to 4.x, make sure you're aware of [any deprecations which might effect you](https://webpack.js.org/migrate/4/). Also make sure any other packages you depend on support Webpack 4 and don't require any changes, e.g. if you explicitly include `webpack` you need to upgrade it to 4.x, and if you use `webpack-dev-server` you need to upgrade it to 3.x.
 
-2. Browser support definitions have been moved to [`.browserslistrc`](../lib/install/config/.browserslistrc) to `/`.
+2. Browser support definitions have been moved from [`.browserslistrc`](../lib/install/config/.browserslistrc) to `/`.
 
 3. Merge any differences between [`config/webpacker.yml`](../lib/install/config/webpacker.yml) and your `config/webpacker.yml`.
 
@@ -104,7 +104,7 @@ If you want to keep the old behavior source maps can be disabled in any environm
 // config/webpack/production.js
 
 const environment = require('./environment')
-environment.config.merge({ devtool: 'none' })
+environment.config.merge({ devtool: false })
 
 module.exports = environment.toWebpackConfig()
 ```
@@ -125,6 +125,16 @@ The compiled packs in the public directory are now stored under namespaces:
 "runtime~hello_react" => "/packs/js/runtime~hello_react-da2baf7fd07b0e8b6d17.js"
 ```
 
+## Upgrading projects with custom Webpack setups that use only the view helpers
+The default value for `extract_css` is **false** in `config/webpack.yml`. Custom webpack builds that extract the CSS such as often used with [React on Rails](https://github.com/shakacode/react_on_rails) should set this value to true or else no CSS link tags are generated.
+
+  ```yml
+  default: &default
+     # other stuff
+     extract_css: true
+     # by default, extract and emit a css file. The default is false
+  ```
+
 ## Example Upgrades
 
 This is what an upgrade to Webpacker 4 looked like for existing Rails apps (please contribute yours!):

data/docs/webpack.md

@@ -146,7 +146,7 @@ environment.loaders.insert('svg', {
       }
     }
   ])
-}, { after: 'file' })
+}, { before: 'file' })
 
 const fileLoader = environment.loaders.get('file')
 fileLoader.exclude = /\.(svg)$/i
@@ -221,7 +221,7 @@ const webpack = require('webpack')
 
 // Get a pre-configured plugin
 const manifestPlugin = environment.plugins.get('Manifest')
-manifestPlugin.opts.writeToFileEmit = false
+manifestPlugin.options.writeToFileEmit = false
 
 // Add an additional plugin of your choosing : ProvidePlugin
 environment.plugins.prepend(
@@ -261,7 +261,7 @@ environment.resolvedModules.append('vendor', 'vendor')
 ```
 
 ### Add SplitChunks (Webpack V4)
-Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible
+Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible.
 
 Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.
 
@@ -269,7 +269,6 @@ For the full configuration options of SplitChunks, see the [Webpack documentatio
 
 ```js
 // config/webpack/environment.js
-const WebpackAssetsManifest = require('webpack-assets-manifest');
 
 // Enable the default config
 environment.splitChunks()

data/gemfiles/Gemfile-rails-edge

@@ -2,12 +2,11 @@ source "https://rubygems.org"
 
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-gem "webpacker", path: ".."
+gemspec path: "../"
 
 gem "rails", github: "rails/rails"
 gem "arel", github: "rails/arel"
 gem "rake", ">= 11.1"
-gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/gemfiles/Gemfile-rails.4.2.x

@@ -1,10 +1,9 @@
 source "https://rubygems.org"
 
-gem "webpacker", path: ".."
+gemspec path: "../"
 
 gem "rails", "~> 4.2.0"
 gem "rake", ">= 11.1"
-gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/gemfiles/Gemfile-rails.5.0.x

@@ -1,10 +1,9 @@
 source "https://rubygems.org"
 
-gem "webpacker", path: ".."
+gemspec path: "../"
 
 gem "rails", "~> 5.0.0"
 gem "rake", ">= 11.1"
-gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/gemfiles/Gemfile-rails.5.1.x

@@ -1,10 +1,9 @@
 source "https://rubygems.org"
 
-gem "webpacker", path: ".."
+gemspec path: "../"
 
 gem "rails", "~> 5.1.0"
 gem "rake", ">= 11.1"
-gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/gemfiles/Gemfile-rails.5.2.x

@@ -1,10 +1,9 @@
 source "https://rubygems.org"
 
-gem "webpacker", path: ".."
+gemspec path: "../"
 
 gem "rails", "~> 5.2.0"
 gem "rake", ">= 11.1"
-gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

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

@@ -30,6 +30,7 @@ module.exports = function(api) {
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
+          corejs: 3,
           modules: false,
           exclude: ['transform-typeof-symbol']
         }
@@ -56,7 +57,8 @@ module.exports = function(api) {
         require('@babel/plugin-transform-runtime').default,
         {
           helpers: false,
-          regenerator: true
+          regenerator: true,
+          corejs: 3
         }
       ],
       [

data/lib/install/config/webpacker.yml

@@ -52,7 +52,7 @@ development:
   <<: *default
   compile: true
 
-  # Verifies that versions and hashed value of the package contents in the project's package.json
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
   check_yarn_integrity: true
 
   # Reference: https://webpack.js.org/configuration/dev-server/

data/lib/install/elm.rb

@@ -24,13 +24,13 @@ say "Installing all Elm dependencies"
 run "yarn add elm elm-webpack-loader"
 run "yarn add --dev elm-hot-webpack-loader"
 run "yarn run elm init"
-run "yarn run elm make"
+run "yarn run elm make #{Webpacker.config.source_path}/Main.elm"
 
 say "Updating webpack paths to include .elm file extension"
 insert_into_file Webpacker.config.config_path, "- .elm\n".indent(4), after: /\s+extensions:\n/
 
 say "Updating Elm source location"
-gsub_file "elm.json", /\"\src\"\n/,
+gsub_file "elm.json", /\"src\"\n/,
   %("#{Webpacker.config.source_path.relative_path_from(Rails.root)}"\n)
 
 say "Updating .gitignore to include elm-stuff folder"

data/lib/install/examples/react/babel.config.js

@@ -30,6 +30,7 @@ module.exports = function(api) {
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
+          corejs: 3,
           modules: false,
           exclude: ['transform-typeof-symbol']
         }

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

@@ -9,11 +9,10 @@ import Vue from 'vue'
 import App from '../app.vue'
 
 document.addEventListener('DOMContentLoaded', () => {
-  const el = document.body.appendChild(document.createElement('hello'))
   const app = new Vue({
-    el,
     render: h => h(App)
-  })
+  }).$mount()
+  document.body.appendChild(app.$el)
 
   console.log(app)
 })

data/lib/tasks/webpacker/compile.rake

@@ -40,9 +40,12 @@ namespace :webpacker do
 end
 
 # Compile packs after we've compiled all other assets during precompilation
-if Rake::Task.task_defined?("assets:precompile")
-  skip_webpacker_precompile = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
-  enhance_assets_precompile unless skip_webpacker_precompile
-else
-  Rake::Task.define_task("assets:precompile" => ["webpacker:yarn_install", "webpacker:compile"])
+skip_webpacker_precompile = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
+
+unless skip_webpacker_precompile
+  if Rake::Task.task_defined?("assets:precompile")
+    enhance_assets_precompile
+  else
+    Rake::Task.define_task("assets:precompile" => ["webpacker:yarn_install", "webpacker:compile"])
+  end
 end

data/lib/webpacker/compiler.rb

@@ -58,17 +58,21 @@ class Webpacker::Compiler
     def run_webpack
       logger.info "Compiling…"
 
-      stdout, sterr , status = Open3.capture3(
+      stdout, stderr, status = Open3.capture3(
         webpack_env,
         "#{RbConfig.ruby} ./bin/webpack",
         chdir: File.expand_path(config.root_path)
       )
 
-      if sterr == "" && status.success?
+      if status.success?
         logger.info "Compiled all packs in #{config.public_output_path}"
-        logger.info stdout if config.webpack_compile_output?
+        logger.error "#{stderr}" unless stderr.empty?
       else
-        logger.error "Compilation failed:\n#{sterr}\n#{stdout}"
+        logger.error "Compilation failed:\n#{stderr}"
+      end
+
+      if config.webpack_compile_output?
+        logger.info stdout
       end
 
       status.success?

data/lib/webpacker/dev_server_runner.rb

@@ -51,6 +51,12 @@ module Webpacker
         else
           ["yarn", "webpack-dev-server"]
         end
+
+        if ARGV.include?("--debug")
+          cmd = [ "node", "--inspect-brk"] + cmd
+          ARGV.delete("--debug")
+        end
+
         cmd += ["--config", @webpack_config]
         cmd += ["--progress", "--color"] if @pretty
 

data/lib/webpacker/helper.rb

@@ -1,6 +1,6 @@
 module Webpacker::Helper
   # Returns current Webpacker instance.
-  # Could be overriden to use multiple Webpacker
+  # Could be overridden to use multiple Webpacker
   # configurations within the same app (e.g. with engines)
   def current_webpacker_instance
     Webpacker.instance

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "4.0.2".freeze
+  VERSION = "4.0.3".freeze
 end

data/lib/webpacker/webpack_runner.rb

@@ -11,6 +11,12 @@ module Webpacker
       else
         ["yarn", "webpack"]
       end
+
+      if ARGV.include?("--debug")
+        cmd = [ "node", "--inspect-brk"] + cmd
+        ARGV.delete("--debug")
+      end
+
       cmd += ["--config", @webpack_config] + @argv
 
       Dir.chdir(@app_path) do

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -12,51 +12,53 @@
     "yarn": ">=1.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-destructuring": "^7.3.2",
-    "@babel/plugin-transform-regenerator": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/runtime": "^7.3.4",
-    "babel-loader": "^8.0.5",
+    "@babel/plugin-transform-destructuring": "^7.4.4",
+    "@babel/plugin-transform-regenerator": "^7.4.5",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/runtime": "^7.4.5",
+    "@babel/runtime-corejs3": "^7.4.5",
+    "babel-loader": "^8.0.6",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-macros": "^2.5.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
     "compression-webpack-plugin": "^2.0.0",
-    "css-loader": "^2.1.0",
+    "core-js": "^3.1.3",
+    "css-loader": "^2.1.1",
     "file-loader": "^3.0.1",
     "flatted": "^2.0.0",
-    "glob": "^7.1.3",
-    "js-yaml": "^3.12.2",
-    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.11.0",
+    "glob": "^7.1.4",
+    "js-yaml": "^3.13.1",
+    "mini-css-extract-plugin": "^0.7.0",
+    "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.3.1",
+    "pnp-webpack-plugin": "^1.4.3",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.6.0",
     "postcss-safe-parser": "^4.0.1",
+    "regenerator-runtime": "^0.13.2",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.2.3",
-    "webpack": "^4.29.6",
+    "terser-webpack-plugin": "^1.3.0",
+    "webpack": "^4.32.2",
     "webpack-assets-manifest": "^3.1.1",
-    "webpack-cli": "^3.2.3",
+    "webpack-cli": "^3.3.2",
     "webpack-sources": "^1.3.0"
   },
   "devDependencies": {
-    "eslint": "^5.15.0",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.12.4",
-    "jest": "^24.1.0"
+    "eslint-plugin-react": "^7.13.0",
+    "jest": "^24.8.0"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",