webpacker 3.6.0 → 4.0.2

data/docs/es6.md

@@ -5,8 +5,8 @@
 
 Webpacker ships with [babel](https://babeljs.io/) - a JavaScript compiler so
 you can use next generation JavaScript, today. The Webpacker installer sets up a
-standard `.babelrc` file in your app root, which will work great in most cases
-because of [babel-env-preset](https://github.com/babel/babel-preset-env).
+standard `babel.config.js` file in your app root, which will work great in most cases
+because of [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env).
 
 Following ES6/7 features are supported out of the box:
 
@@ -19,14 +19,14 @@ Following ES6/7 features are supported out of the box:
 We have also included [babel polyfill](https://babeljs.io/docs/usage/polyfill/)
 that includes a custom regenerator runtime and core-js.
 
-Don't forget to import `babel-polyfill` in your main entry point like so:
+Don't forget to import `@babel/polyfill` in your main entry point like so:
 
 ```js
-import "babel-polyfill"
+import "@babel/polyfill"
 ```
 
 
-## Module import() vs require()
+## Module import vs require()
 
 While you are free to use `require()` and `module.exports`, we encourage you
 to use `import` and `export` instead since it reads and looks much better.

data/docs/testing.md

@@ -34,7 +34,7 @@ It is beneficial to use the same webpack configuration file (generated by webpac
 // config/webpack/test.js
 const environment = require('./environment')
 environment.plugins.get('Manifest').opts.writeToFileEmit = process.env.NODE_ENV !== 'test'
-environment.loaders.set('istanbul-instrumenter', {
+environment.loaders.append('istanbul-instrumenter', {
   test: /\.ts$/,
   enforce: "post",
   loader: "istanbul-instrumenter-loader",

data/docs/troubleshooting.md

@@ -86,7 +86,7 @@ chmod +x $HOME/your_rails_app/node_modules/.bin/elm-make
 ```
 
 ## Rake assets:precompile fails. ExecJS::RuntimeError
-This error occurs because you are trying to uglify a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
+This error occurs because you are trying to minify by terser a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
 
 ```ruby
 // production.rb
@@ -96,13 +96,13 @@ Rails.application.config.assets.js_compressor = :uglifier
 
 # To
 
-#Rails.application.config.assets.js_compressor = :uglifier
+Rails.application.config.assets.js_compressor = Uglifier.new(harmony: true)
 
 ```
 
-## Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
+### Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
 
-To silence these warnings, please update `config/webpack/environment.js`
+To silent these warnings, please update `config/webpack/environment.js`
 
 ```js
 // environment.js

data/docs/v4-upgrade.md

@@ -0,0 +1,132 @@
+# Webpacker Upgrade Guide
+
+
+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 `/`.
+
+3. Merge any differences between [`config/webpacker.yml`](../lib/install/config/webpacker.yml) and your `config/webpacker.yml`.
+
+4. Webpacker v4 upgrades Babel to [v7](https://babeljs.io/docs/en/v7-migration), see also [the release blog post](https://babeljs.io/blog/2018/08/27/7.0.0). Many packages were moved to the `@babel/` namespace, any babel plugins you have will need to be updated. It may be worth checking out [babel-upgrade](https://github.com/babel/babel-upgrade) if you have problems. ([#1564](https://github.com/rails/webpacker/pull/1564))
+
+5. `.babelrc` should be replaced with `babel.config.js` and `.postcssrc.yml` should be replaced with `postcss.config.js` ([#1822](https://github.com/rails/webpacker/pull/1822)). If you never changed these files from their defaults, the versions of [babel.config.js](../lib/install/config/babel.config.js) and [postcss.config.js](../lib/install/config/postcss.config.js) in the webpacker repository should be usable.
+
+6. Due to the change in [#1625](https://github.com/rails/webpacker/pull/1625), you'll want to make sure that `extract_css` is set to true for the `default` environment in `webpacker.yml` if you want to have Webpacker supply your CSS.
+
+## SplitChunks Configuration
+
+If you used the `CommonsChunkPlugin` you'll need to upgrade to using the new `splitChunks`.
+
+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.
+
+In Webpack v4, the `CommonsChunkPlugin` was removed in favor of `optimization.splitChunks`.
+
+For the full configuration options of `splitChunks`, see the [Webpack documentation](https://webpack.js.org/plugins/split-chunks-plugin/).
+
+```js
+// config/webpack/environment.js
+const WebpackAssetsManifest = require('webpack-assets-manifest');
+
+// Enable the default config
+environment.splitChunks()
+
+// or using custom config
+environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
+```
+
+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
+<%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
+
+<!-- Creates the following: -->
+<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+```
+
+**Important:** Pass all your pack names to the helper otherwise you will get duplicated chunks on the page.
+
+```erb
+<%# DO %>
+<%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
+
+<%# DON'T %>
+<%= javascript_packs_with_chunks_tag 'calendar' %>
+<%= javascript_packs_with_chunks_tag 'map' %>
+```
+
+## Package-Specific Notes
+
+- If you're using React, you need to add `"@babel/preset-react"`, to the list of `presets` in your babel config.
+- If you're using Vue Loader, you'll need to upgrade to [v15](https://vue-loader.vuejs.org/migrating.html) for Webpack 4.
+- To see what Webpacker generates for a given framework with v4, you may want to re-run `bundle exec rake webpacker:install:FRAMEWORK` and let it override the files for your given JavaScript framework, and then compare them to see what changes you'll need to make.
+
+## Excluding node_modules From Being Transpiled By Babel-Loader
+
+One change to take into consideration, is that Webpacker 4 transpiles the
+`node_modules` folder with the `babel-loader`. This folder used to be ignored by
+Webpacker 3. The new behavior helps in case some library contains ES6 code, but in
+some cases it can lead to issues. To avoid running `babel-loader` in the
+`node_modules` folder, replicating the same behavior as Webpacker 3, the
+following code can be added to `config/webpack/environment.js`:
+
+```javascript
+environment.loaders.delete('nodeModules')
+```
+
+Alternatively, in order to skip only a specific library in the `node_modules`
+folder, this code can be added:
+
+```javascript
+const nodeModulesLoader = environment.loaders.get('nodeModules')
+if (!Array.isArray(nodeModulesLoader.exclude)) {
+  nodeModulesLoader.exclude = (nodeModulesLoader.exclude == null)
+    ? []
+    : [nodeModulesLoader.exclude]
+}
+nodeModulesLoader.exclude.push(/some-library/) // replace `some-library` with
+                                               // the actual path to exclude
+```
+
+## Source Maps Enabled By Default
+
+Source maps are now enabled in production to make debugging in production easier. Enabling source maps doesn't have drawbacks for most of the applications since maps are compressed by default and aren't loaded by browsers unless Dev Tools are opened.
+
+If you want to keep the old behavior source maps can be disabled in any environment configuration, e.g:
+
+```js
+// config/webpack/production.js
+
+const environment = require('./environment')
+environment.config.merge({ devtool: 'none' })
+
+module.exports = environment.toWebpackConfig()
+```
+
+## Namespaces
+
+The compiled packs in the public directory are now stored under namespaces:
+
+- JavaScripts are stored under `js`
+- Stylesheets are stored under `css`
+- Other resources are stored under `media`
+
+```rb
+# Before
+"runtime~hello_react" => "/packs/runtime~hello_react-da2baf7fd07b0e8b6d17.js"
+
+# After
+"runtime~hello_react" => "/packs/js/runtime~hello_react-da2baf7fd07b0e8b6d17.js"
+```
+
+## Example Upgrades
+
+This is what an upgrade to Webpacker 4 looked like for existing Rails apps (please contribute yours!):
+
+- https://github.com/connorshea/ContinueFromCheckpoint/pull/77

data/docs/webpack.md

@@ -38,6 +38,7 @@ environment.config.set('output.filename', '[name].js')
 
 // Merge custom config
 environment.config.merge(customConfig)
+environment.config.merge({ devtool: 'none' })
 
 // Delete a property
 environment.config.delete('output.chunkFilename')
@@ -68,10 +69,13 @@ yarn add json-loader
 // config/webpack/environment.js
 const { environment } = require('@rails/webpacker')
 
-environment.loaders.append('json', {
+const jsonLoader = {
   test: /\.json$/,
   use: 'json-loader'
-})
+}
+
+// Insert json loader at the end of list
+environment.loaders.append('json', jsonLoader)
 
 // Insert json loader at the top of list
 environment.loaders.prepend('json', jsonLoader)
@@ -168,8 +172,12 @@ module.exports = {
 // config/webpack/environment.js
 
 const { environment } = require('@rails/webpacker')
+const url = require('./loaders/url')
 
 environment.loaders.prepend('url', url)
+
+// avoid using both file and url loaders
+environment.loaders.get('file').test = /\.(tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i
 ```
 
 ### Overriding Loader Options in webpack 3+ (for CSS Modules etc.)
@@ -252,7 +260,52 @@ const { environment } = require('@rails/webpacker')
 environment.resolvedModules.append('vendor', 'vendor')
 ```
 
-### Add common chunks
+### 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
+
+Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.
+
+For the full configuration options of SplitChunks, see the [Webpack documentation](https://webpack.js.org/plugins/split-chunks-plugin/).
+
+```js
+// config/webpack/environment.js
+const WebpackAssetsManifest = require('webpack-assets-manifest');
+
+// Enable the default config
+environment.splitChunks()
+
+// or using custom config
+environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
+```
+
+Then use, `javascript_packs_with_chunks_tag` helper to include all the transpiled
+packs with the chunks in your view, which creates html tags for all the chunks.
+
+```erb
+<%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
+
+<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+```
+
+**Important:** Pass all your pack names when using this helper otherwise you will
+get duplicated chunks on the page.
+
+```erb
+<%# DO %>
+<%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
+
+<%# DON'T %>
+<%= javascript_packs_with_chunks_tag 'calendar' %>
+<%= javascript_packs_with_chunks_tag 'map' %>
+```
+
+For the old configuration with the CommonsChunkPlugin see below. **Note** that this functionality is deprecated in Webpack V4.
+
+### 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/docs/yarn.md

@@ -1,6 +1,6 @@
 # Yarn
 
-Webpacker by default uses `yarn` as package manager for node modules
+Webpacker by default uses `yarn` as a package manager for `node_modules`
 
 
 ## Add a new npm module
@@ -10,3 +10,14 @@ To add any new JS module you can use `yarn`:
 ```bash
 yarn add bootstrap material-ui
 ```
+
+## Add an npm module to `devDependencies`
+To add a new JS module that will only be available to local development:
+
+```bash
+yarn add --dev browser-sync
+```
+
+Be careful not to add any build or app related JS modules in this fashion. Adding JS modules to `devDependencies` [will block them from being installed in **any** production environment](https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-production-true-false).
+
+Docs from JS modules may instruct you to use `--dev` or `devDependencies`, but this is generally under the assumption that you are using a `node.js` workflow.

data/gemfiles/Gemfile-rails-edge

@@ -7,7 +7,7 @@ gem "webpacker", path: ".."
 gem "rails", github: "rails/rails"
 gem "arel", github: "rails/arel"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+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

@@ -2,9 +2,9 @@ source "https://rubygems.org"
 
 gem "webpacker", path: ".."
 
-gem "rails", "~> 4.2"
+gem "rails", "~> 4.2.0"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+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

@@ -2,9 +2,9 @@ source "https://rubygems.org"
 
 gem "webpacker", path: ".."
 
-gem "rails", "~> 5.0"
+gem "rails", "~> 5.0.0"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+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

@@ -2,9 +2,9 @@ source "https://rubygems.org"
 
 gem "webpacker", path: ".."
 
-gem "rails", "~> 5.1"
+gem "rails", "~> 5.1.0"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+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

@@ -0,0 +1,10 @@
+source "https://rubygems.org"
+
+gem "webpacker", 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/bin/webpack

@@ -12,4 +12,8 @@ require "bundler/setup"
 
 require "webpacker"
 require "webpacker/webpack_runner"
-Webpacker::WebpackRunner.run(ARGV)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

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

@@ -12,4 +12,8 @@ require "bundler/setup"
 
 require "webpacker"
 require "webpacker/dev_server_runner"
-Webpacker::DevServerRunner.run(ARGV)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end

data/lib/install/coffee.rb

@@ -9,11 +9,11 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('coffee', coffee)\n",
+  "environment.loaders.prepend('coffee', coffee)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .coffee file extension"
-insert_into_file Webpacker.config.config_path, "    - .coffee\n", after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .coffee\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/coffee/hello_coffee.coffee",

data/lib/install/config/.browserslistrc

@@ -0,0 +1 @@
+defaults

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

@@ -0,0 +1,70 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].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,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}