webpacker 4.0.0.rc.5 → 4.0.0.rc.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee04d7f5b912e098d9fc2a7916a40a91bfacc978f8a9882e09caa0f3f34b3c4a
-  data.tar.gz: db1260bcf5cff15d865242d590a26dfbd0cae132d9884877e9f07256d680fa06
+  metadata.gz: 3a8f0d941f2281fcab2e44fe0df01aebf7935d9db226b54c21064babf12ec777
+  data.tar.gz: b23475b4ab4655925d13f3653b9d11ec36616794da095e51df71eaf8a9f5b9eb
 SHA512:
-  metadata.gz: 0217edc000e62da86721ae4701ce4e3ce1606d7284395efc683375218ae50cd75bc86c3b401e3919aad5fc3d2e2bef322ac43862a5365c43913b3eb5d5628154
-  data.tar.gz: e50577f9329c987630a9dc9e93a90952cad885caa3c744c7477b446524284e319430f508ce0cef6230fe5d488708df9b2da0cc6a68b985f0fc3dc5c072098d5b
+  metadata.gz: 14ad964b9007b208377b7284ba10382dab00782d043e530cf469928c5d5e41e730d8326c7146193bd0fcd4a84069eeede3202e5b87ccae86023fb1dc7ad923ae
+  data.tar.gz: 725755c1983b0a40485a278973ebe2bab58a5346a9fa8ab1d5d413a86a34939f8baf11ee2ff102f2e5a738ebc0a7b8e0deef71295ed61335255f64971a1240da

data/CHANGELOG.md

@@ -1,8 +1,34 @@
 **Please note that Webpacker 3.1.0 and 3.1.1 have some serious bugs so please consider using either 3.0.2 or 3.2.0**
 
+## [4.0.0.rc.6] - 2019-01-25
+
+### Fixed
+
+- Remove `context` from file loader in favour of simpler paths
+
+```rb
+# before
+"_/assets/images/avatar.png": "/packs/_/assets/images/avatar-057862c747f0fdbeae506bdd0516cad1.png"
+
+# after
+"media/avatar.png": "/packs/media/avatar-057862c747f0fdbeae506bdd0516cad1.png"
+```
+
+### Added
+
+- Namespaces for compiled packs in the public directory
+
+```rb
+# before
+"runtime~hello_react" => "/packs/runtime~hello_react-da2baf7fd07b0e8b6d17.js"
+
+# after
+"runtime~hello_react" => "/packs/js/runtime~hello_react-da2baf7fd07b0e8b6d17.js"
+```
+
 ## [4.0.0.rc.5] - 2019-01-21
 
-### Updated
+### Updated
 
 - Gems and node dependencies
 
@@ -28,7 +54,7 @@ helper otherwise you will get duplicated chunks on the page.
 <%# DO %>
 # <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
 <%# DON'T %>
-# <%= stylesheet_packs_with_chunks_tag 'calendar' %>
+# <%= stylesheet_packs_with_chunks_tag 'calendar' %>
 # <%= stylesheet_packs_with_chunks_tag 'map' %>
 ```
 
@@ -438,7 +464,7 @@ without sprockets
 - Allow dev server connect timeout (in seconds) to be configurable, default: 0.01
 
 ```rb
-# Change to 1s
+# Change to 1s
 Webpacker.dev_server.connect_timeout = 1
 ```
 

data/Gemfile.lock

@@ -14,7 +14,7 @@ GIT
 PATH
   remote: .
   specs:
-    webpacker (4.0.0.rc.5)
+    webpacker (4.0.0.rc.6)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)

data/docs/deployment.md

@@ -72,3 +72,14 @@ server {
 
 Webpacker out-of-the-box provides CDN support using your Rails app `config.action_controller.asset_host` setting. If you already have [CDN](http://guides.rubyonrails.org/asset_pipeline.html#cdns) added in your Rails app
 you don't need to do anything extra for Webpacker, it just works.
+
+## Capistrano
+
+### Assets compiling on every deployment even if JavaScript and CSS files are not changed
+
+Make sure you have `public/packs` and `node_modules` in `:linked_dirs`
+
+```ruby
+append :linked_dirs, "log", "tmp/pids", "tmp/cache", "tmp/sockets", "public/packs", ".bundle", "node_modules"
+```
+

data/docs/v4-upgrade.md

@@ -0,0 +1,94 @@
+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.
+1. Browser support definitions have been moved to [`.browserslistrc`](../lib/install/config/.browserslistrc) to `/`.
+1. Merge any differences between [`config/webpacker.yml`](../lib/install/config/webpacker.yml) and your `config/webpacker.yml`.
+1. 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))
+1. `.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.
+1. 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.
+
+### Add SplitChunks
+
+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, `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' %>
+
+<!-- would create 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 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' %>
+```
+
+### 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
+```
+
+### 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/lib/install/vue.rb

@@ -14,7 +14,7 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
 
 say "Adding vue loader to config/webpack/environment.js"
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "const vue =  require('./loaders/vue')\n",
+  "const vue = require('./loaders/vue')\n",
   after: "require('vue-loader')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,

data/lib/webpacker/version.rb

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

data/package/environments/__tests__/base.js

@@ -31,8 +31,8 @@ describe('Environment', () => {
 
     test('should return output', () => {
       const config = environment.toWebpackConfig()
-      expect(config.output.filename).toEqual('[name]-[chunkhash].js')
-      expect(config.output.chunkFilename).toEqual('[name]-[chunkhash].chunk.js')
+      expect(config.output.filename).toEqual('js/[name]-[chunkhash].js')
+      expect(config.output.chunkFilename).toEqual('js/[name]-[chunkhash].chunk.js')
     })
 
     test('should return default loader rules for each file in config/loaders', () => {

data/package/environments/base.js

@@ -36,8 +36,8 @@ const getPluginList = () => {
   result.append(
     'MiniCssExtract',
     new MiniCssExtractPlugin({
-      filename: '[name]-[contenthash:8].css',
-      chunkFilename: '[name]-[contenthash:8].chunk.css'
+      filename: 'css/[name]-[contenthash:8].css',
+      chunkFilename: 'css/[name]-[contenthash:8].chunk.css'
     })
   )
   result.append(
@@ -83,9 +83,9 @@ const getModulePaths = () => {
 const getBaseConfig = () => new ConfigObject({
   mode: 'production',
   output: {
-    filename: '[name]-[chunkhash].js',
-    chunkFilename: '[name]-[chunkhash].chunk.js',
-    hotUpdateChunkFilename: '[id]-[hash].hot-update.js',
+    filename: 'js/[name]-[chunkhash].js',
+    chunkFilename: 'js/[name]-[chunkhash].chunk.js',
+    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
     path: config.outputPath,
     publicPath: config.publicPath
   },

data/package/rules/file.js

@@ -1,5 +1,4 @@
-const { join } = require('path')
-const { source_path: sourcePath, static_assets_extensions: fileExtensions } = require('../config')
+const { static_assets_extensions: fileExtensions } = require('../config')
 
 module.exports = {
   test: new RegExp(`(${fileExtensions.join('|')})$`, 'i'),
@@ -7,8 +6,7 @@ module.exports = {
     {
       loader: 'file-loader',
       options: {
-        name: '[path][name]-[hash].[ext]',
-        context: join(sourcePath)
+        name: 'media/[name]-[hash:8].[ext]'
       }
     }
   ]

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "4.0.0-rc.5",
+  "version": "4.0.0-rc.6",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: webpacker
 version: !ruby/object:Gem::Version
-  version: 4.0.0.rc.5
+  version: 4.0.0.rc.6
 platform: ruby
 authors:
 - David Heinemeier Hansson
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-21 00:00:00.000000000 Z
+date: 2019-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -102,6 +102,7 @@ files:
 - docs/testing.md
 - docs/troubleshooting.md
 - docs/typescript.md
+- docs/v4-upgrade.md
 - docs/webpack-dev-server.md
 - docs/webpack.md
 - docs/yarn.md
@@ -252,8 +253,8 @@ homepage: https://github.com/rails/webpacker
 licenses:
 - MIT
 metadata:
-  source_code_uri: https://github.com/rails/webpacker/tree/v4.0.0.rc.5
-  changelog_uri: https://github.com/rails/webpacker/blob/v4.0.0.rc.5/CHANGELOG.md
+  source_code_uri: https://github.com/rails/webpacker/tree/v4.0.0.rc.6
+  changelog_uri: https://github.com/rails/webpacker/blob/v4.0.0.rc.6/CHANGELOG.md
 post_install_message: 
 rdoc_options: []
 require_paths: