webpacker 4.0.7 → 4.1.0

data/docs/docker.md

@@ -18,18 +18,37 @@ services:
       - '3035:3035'
 ```
 
+Second, change the webpack-dev-server host to the service name of the docker-compose in config/webpacker.yml:
+
+```yaml
+development:
+  <<: *default
+  dev_server:
+    host: webpacker
+```
+
 add nodejs and yarn as dependencies in Dockerfile,
 
 ```dockerfile
 FROM ruby:2.4.1
-RUN apt-get update -qq
 
-RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
-RUN curl -sL https://deb.nodesource.com/setup_8.x | bash
-RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+RUN apt-get update -qq && apt-get install -y build-essential nodejs \
+ && rm -rf /var/lib/apt/lists/* \
+ && curl -o- -L https://yarnpkg.com/install.sh | bash
+
+# Rest of the commands....
+```
+
+Please note: if using `assets:precompile` in the Dockerfile or have issues with the snippet above then try:
+
+```dockerfile
+FROM ruby:2.4.1
 
-RUN apt-get install -y nodejs
-RUN apt-get update && apt-get install -y yarn
+RUN curl -sL https://deb.nodesource.com/setup_8.x | bash \
+ && apt-get update && apt-get install -y nodejs && rm -rf /var/lib/apt/lists/* \
+ && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
+ && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
+ && apt-get update && apt-get install -y yarn && rm -rf /var/lib/apt/lists/*
 
 # Rest of the commands....
 ```

data/docs/engines.md

@@ -9,7 +9,7 @@ This guide describes how to do that using [Rails engines](https://guides.rubyonr
 
 ## Step 1: create Rails engine.
 
-First, you create a Rails engine (say, `MyEngine`). See the offical [Rails guide](https://guides.rubyonrails.org/engines.html).
+First, you create a Rails engine (say, `MyEngine`). See the official [Rails guide](https://guides.rubyonrails.org/engines.html).
 
 ## Step 2: install Webpacker within the engine.
 
@@ -99,9 +99,18 @@ 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`
+- File `my_engine_rootlib/tasks/my_engine_tasks.rake`
 
 ```ruby
+def ensure_log_goes_to_stdout
+  old_logger = Webpacker.logger
+  Webpacker.logger = ActiveSupport::Logger.new(STDOUT)
+  yield
+ensure
+  Webpacker.logger = old_logger
+end
+
+
 namespace :my_engine do
   namespace :webpacker do
     desc "Install deps with yarn"
@@ -114,16 +123,44 @@ namespace :my_engine do
     desc "Compile JavaScript packs using webpack for production with digests"
     task compile: [:yarn_install, :environment] do
       Webpacker.with_node_env("production") do
+        ensure_log_goes_to_stdout do
           if MyEngine.webpacker.commands.compile
             # Successful compilation!
           else
             # Failed compilation
             exit!
           end
+        end
       end
     end
   end
 end
+
+def yarn_install_available?
+  rails_major = Rails::VERSION::MAJOR
+  rails_minor = Rails::VERSION::MINOR
+
+  rails_major > 5 || (rails_major == 5 && rails_minor >= 1)
+end
+
+def enhance_assets_precompile
+  # yarn:install was added in Rails 5.1
+  deps = yarn_install_available? ? [] : ["my_engine:webpacker:yarn_install"]
+  Rake::Task["assets:precompile"].enhance(deps) do
+    Rake::Task["my_engine:webpacker:compile"].invoke
+  end
+end
+
+# Compile packs after we've compiled all other assets during precompilation
+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" => "my_engine:webpacker:compile")
+  end
+end
 ```
 
 ## Step 7: serving compiled packs.
@@ -155,7 +192,7 @@ To serve static assets from the engine's `public/` folder you must add a middlew
 # application.rb
 
 config.middleware.use(
-  "Rack::Static",
+  Rack::Static,
   urls: ["/my-engine-packs"], root: "my_engine/public"
 )
 ```

data/docs/es6.md

@@ -1,6 +1,5 @@
 # ES6
 
-
 ## Babel
 
 Webpacker ships with [babel](https://babeljs.io/) - a JavaScript compiler so
@@ -26,6 +25,25 @@ import "core-js/stable";
 import "regenerator-runtime/runtime";
 ```
 
+## Dynamic/Lazy Chunk Loading
+
+For this section, you need Webpack and Webpacker 4. Then enable `SplitChunks` as it is explained in [docs/webpack](webpack.md).
+
+[Dynamic code splitting](https://webpack.js.org/guides/code-splitting#dynamic-imports) enables you to conditionally request/run only the JS that you need. For example, if your site has a `searchBarComponent` on every page, you can reduce the page overhead by deferring the request for the `searchBarComponent` code until after the page has loaded, until the user has scrolled it into view, or until the user has clicked on an element.
+
+```js
+ function loadSearchBarComponent() {
+   return import(/* webpackChunkName: "searchBarComponent" */ './pathTo/searchBarComponent')
+ }
+```
+
+The comment you see above (`/* webpackChunkName */`) is not arbitrary, it is one of webpacks [magic comments](https://webpack.js.org/api/module-methods/#magic-comments). They can be used to fine-tune `import()` with settings such as `defer` or `prefetch`.
+
+**Warning**: You should not attempt to dynamically load anything from your `packs/` folder. Instead, try to make your `pack` scripts a hub from which you dynamically load `non-pack` scripts.
+
+- [Docs for using magic comments](https://webpack.js.org/api/module-methods/#magic-comments)
+- [Docs for configuring `splitChunks` in webpacker](https://github.com/rails/webpacker/blob/master/docs/webpack.md#add-splitchunks-webpack-v4).
+- [Docs for using dynamic `import()`](https://webpack.js.org/guides/code-splitting#dynamic-imports).
 
 ## Module import vs require()
 

data/docs/troubleshooting.md

@@ -4,22 +4,36 @@
 
 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`. 
+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 
+   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
 
-*  If you get this error `ENOENT: no such file or directory - node-sass` on Heroku
-or elsewhere during `assets:precompile` or `bundle exec rails webpacker:compile`
-then you would need to rebuild node-sass. It's a bit of a weird error;
-basically, it can't find the `node-sass` binary.
-An easy solution is to create a postinstall hook - `npm rebuild node-sass` in
-`package.json` and that will ensure `node-sass` is rebuilt whenever
-you install any new modules.
+If you get the error `ENOENT: no such file or directory - node-sass` on deploy with
+`assets:precompile` or `bundle exec rails webpacker:compile` you may need to
+move Sass to production `dependencies`.
 
+Move any packages that related to Sass (e.g. `node-sass` or `sass-loader`) from
+`devDependencies` to `dependencies` in `package.json`. This is because
+webpacker is running on a production system with the Rails workflow to build
+the assets. Particularly on hosting providers that try to detect and do the right
+thing, like Heroku.
+
+However, if you get this on local development, or not during a deploy then you
+may need to rebuild `node-sass`. It's a bit of a weird error; basically, it
+can't find the `node-sass` binary.  An easy solution is to create a postinstall
+hook to ensure `node-sass` is rebuilt whenever new modules are installed.
+
+In `package.json`:
+
+```json
+"scripts": {
+  "postinstall": "npm rebuild node-sass"
+}
+```
 
 ## Can't find hello_react.js in manifest.json
 
@@ -126,3 +140,17 @@ environment.plugins.append('ContextReplacement',
   )
 )
 ```
+
+### Compilation Fails Silently
+
+If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the webpack_compile_output configuration variable to 'true' in webpacker.yml may add some helpful error information to your log file (Rails log/development.log or log/production.log)
+
+```yml
+# webpacker.yml
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: complaints_packs
+  webpack_compile_output: true
+```

data/docs/typescript.md

@@ -15,14 +15,15 @@ now you can use typescript, JSX with React.
 
 ## Typescript with Vue components
 
-1. Setup vue using Webpacker [vue installer](../README.md#vue). Then run the typescript installer
+1. Setup Vue using the Webpacker [Vue installer](../README.md#vue). Then run the TypeScript installer
 
 ```bash
 bundle exec rails webpacker:install:typescript
 ```
 
 2. Rename generated `hello_vue.js` to `hello_vue.ts`.
-3. Change generated `config/webpack/loaders/typescript.js` from
+3. Add the webpack plug-n-play plugin to your yarn packages with `yarn add pnp-webpack-plugin`.
+4. Change the generated `config/webpack/loaders/typescript.js` from
 
 ```js
 module.exports = {
@@ -36,18 +37,20 @@ module.exports = {
 to
 
 ```js
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+
 module.exports = {
   test: /\.(ts|tsx)?(\.erb)?$/,
   use: [{
     loader: 'ts-loader',
-    options: {
+    options: PnpWebpackPlugin.tsLoaderOptions({
       appendTsSuffixTo: [/\.vue$/]
-    }
+    })
   }]
 }
 ```
 
-and now you can use `<script lang="ts">` in your `.vue` component files.
+and now you can use `<script lang="ts">` in your `.vue` component files. See [the pnp-webpack-plugin docs for the `ts-loader` integration](https://github.com/arcanis/pnp-webpack-plugin#ts-loader-integration) for more info.
 
 ## HTML templates with Typescript and Angular
 

data/docs/webpack-dev-server.md

@@ -38,7 +38,7 @@ If you use Nginx in development to proxy requests to your Rails server from
 another domain, like `myapp.dev`, the Webpacker middleware will be able to
 forward requests for "packs" to the webpack dev server.
 
-If you're using `inline` mode behing Nginx, you may also need to provide the
+If you're using `inline` mode behind Nginx, you may also need to provide the
 hostname to webpack dev server so it can initiate the websocket connection for
 live reloading ([Webpack
 docs](https://webpack.js.org/configuration/dev-server/#devserver-public)).

data/docs/webpack.md

@@ -189,9 +189,10 @@ const { environment } = require('@rails/webpacker')
 const merge = require('webpack-merge')
 
 const myCssLoaderOptions = {
-  modules: true,
+  modules: {
+    localIdentName: '[name]__[local]___[hash:base64:5]'
+  },
   sourceMap: true,
-  localIdentName: '[name]__[local]___[hash:base64:5]'
 }
 
 const CSSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'css-loader')
@@ -277,7 +278,7 @@ environment.splitChunks()
 environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
 ```
 
-Then use, `javascript_packs_with_chunks_tag` helper to include all the transpiled
+Then use the `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` helpers to include all the transpiled
 packs with the chunks in your view, which creates html tags for all the chunks.
 
 ```erb
@@ -304,6 +305,20 @@ get duplicated chunks on the page.
 
 For the old configuration with the CommonsChunkPlugin see below. **Note** that this functionality is deprecated in Webpack V4.
 
+#### Preloading
+
+Before preload or prefetch your assets, please read [https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content).
+
+Webpack also provide it's own methods for preload or prefetch [https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c).
+
+You can preload your assets with the `preload_pack_asset` helper if you have Rails >= 5.2.x.
+
+```erb
+<%= preload_pack_asset 'fonts/fa-regular-400.woff2' %>
+```
+
+**Warning:** You don't want to preload the css, you want to preload the fonts and images inside the css so that fonts, css, and images can all be downloaded in parallel instead of waiting for the browser to parse the css.
+
 ### Add common chunks (deprecated in Webpack V4)
 
 The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in the cache for later use. This results in page speed optimizations as the browser can quickly serve the shared code from the cache, rather than being forced to load a larger bundle whenever a new page is visited.

data/gemfiles/Gemfile-rails.6.0.x

@@ -0,0 +1,9 @@
+source "https://rubygems.org"
+
+gemspec path: "../"
+
+gem "rails", "~> 6.0.0.rc2"
+gem "rake", ">= 11.1"
+gem "rack-proxy", require: false
+gem "minitest", "~> 5.0"
+gem "byebug"

data/lib/install/bin/webpack

@@ -7,7 +7,6 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

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

@@ -7,7 +7,6 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

data/lib/install/coffee.rb

@@ -6,7 +6,7 @@ copy_file "#{__dir__}/loaders/coffee.js", Rails.root.join("config/webpack/loader
 say "Adding coffee loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "const coffee =  require('./loaders/coffee')\n",
-  after: "require('@rails/webpacker')\n"
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.prepend('coffee', coffee)\n",

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

@@ -18,7 +18,7 @@ module.exports = function(api) {
   return {
     presets: [
       isTestEnv && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           targets: {
             node: 'current'
@@ -26,7 +26,7 @@ module.exports = function(api) {
         }
       ],
       (isProductionEnv || isDevelopmentEnv) && [
-        require('@babel/preset-env').default,
+        '@babel/preset-env',
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
@@ -37,24 +37,24 @@ module.exports = function(api) {
       ]
     ].filter(Boolean),
     plugins: [
-      require('babel-plugin-macros'),
-      require('@babel/plugin-syntax-dynamic-import').default,
-      isTestEnv && require('babel-plugin-dynamic-import-node'),
-      require('@babel/plugin-transform-destructuring').default,
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
       [
-        require('@babel/plugin-proposal-class-properties').default,
+        '@babel/plugin-proposal-class-properties',
         {
           loose: true
         }
       ],
       [
-        require('@babel/plugin-proposal-object-rest-spread').default,
+        '@babel/plugin-proposal-object-rest-spread',
         {
           useBuiltIns: true
         }
       ],
       [
-        require('@babel/plugin-transform-runtime').default,
+        '@babel/plugin-transform-runtime',
         {
           helpers: false,
           regenerator: true,
@@ -62,7 +62,7 @@ module.exports = function(api) {
         }
       ],
       [
-        require('@babel/plugin-transform-regenerator').default,
+        '@babel/plugin-transform-regenerator',
         {
           async: false
         }

data/lib/install/config/webpacker.yml

@@ -7,7 +7,7 @@ default: &default
   public_output_path: packs
   cache_path: tmp/cache/webpacker
   check_yarn_integrity: false
-  webpack_compile_output: false
+  webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -69,6 +69,7 @@ development:
     disable_host_check: true
     use_local_ip: false
     quiet: false
+    pretty: false
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:

data/lib/install/elm.rb

@@ -6,7 +6,7 @@ copy_file "#{__dir__}/loaders/elm.js", Rails.root.join("config/webpack/loaders/e
 say "Adding elm loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "const elm =  require('./loaders/elm')\n",
-  after: "require('@rails/webpacker')\n"
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.prepend('elm', elm)\n",

data/lib/install/erb.rb

@@ -5,8 +5,8 @@ copy_file "#{__dir__}/loaders/erb.js", Rails.root.join("config/webpack/loaders/e
 
 say "Adding erb loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "const erb =  require('./loaders/erb')\n",
-  after: "require('@rails/webpacker')\n"
+  "const erb = require('./loaders/erb')\n",
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   "environment.loaders.prepend('erb', erb)\n",