webpacker 6.0.0.beta.2 → 6.0.0.pre.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 70198a585cf22360094497e860a23dcd172c7926820eaa905b00eaf15c997010
-  data.tar.gz: a1ff9f0cc031d1fffc69813b071b10947aa1648fbedaee826be547bd03adcdc2
+  metadata.gz: c5808c11756423a2f910b9aa3675b5d85c94c5cae43a2db1c5c726588bb70cc7
+  data.tar.gz: f1b92f83b8d9f06a136c2df4116144b5a70bf74c7ab5c426fc90900f18f8de6a
 SHA512:
-  metadata.gz: 2e16cfe7311345f9e2af7e4b821ada9acdaff357ff64cbbbebf038a43199dcafa3b82c403bec1f9ab182ff456efd9ff14eb9756b4edbd76c68beba3cf8543cdc
-  data.tar.gz: de893725da86a372346c6c552a49a4efb078e24343e16a173b6d51230dc2ccb8bc26d5fbf8726d6d8f8d1a7277eea81d3ed29a06c76998db98cb5970c040bcb0
+  metadata.gz: c8a10749bc365d1be38d214ab5cedc921ba5dc437193d2f0bf6da18a0e17650a7b35887fd340356de6f5476e388279f58324345685bfe848e2bcb26dfccbaf7a
+  data.tar.gz: 4106137abde49ccda533e7441d0e751f1540a4e175b8f392f486a9eea152083114fabd357db03dd57b9a2a2fe5774563a4cc6f7cf04b78c027b052190bd34d04

data/CHANGELOG.md

@@ -2,31 +2,19 @@
 
 **Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above**
 
-## [[6.0.0]](https://github.com/rails/webpacker/compare/v5.1.1...master) - 2021-TBD
+## [[6.0.0]](https://github.com/rails/webpacker/compare/v5.1.1...v6.0.0) - 2020-TBD
 
 - `node_modules` will no longer be compiled by default. This primarily fixes [rails issue #35501](https://github.com/rails/rails/issues/35501) as well as [numerous other webpacker issues](https://github.com/rails/webpacker/issues/2131#issuecomment-581618497). The disabled loader can still be required explicitly via:
-
 ```js
 const nodeModules = require('@rails/webpacker/rules/node_modules.js')
 environment.loaders.append('nodeModules', nodeModules)
 ```
-
 - If you have added `environment.loaders.delete('nodeModules')` to your `environment.js`, this must be removed or you will receive an error (`Item nodeModules not found`).
-- The install task will now set the `extract_css` default to `true` in all environments and generate a separate `application.css` file for the default `application` pack, as supported by multiple files per entry introduced in 5.0.0. [#2608](https://github.com/rails/webpacker/pull/2608)
+- The install task will now set the `extract_css` default to `true` in all environments and generate a separate `application.css` file for the default `application` pack, as supported by multiple files per entry introduced in 5.0.0.  [#2608](https://github.com/rails/webpacker/pull/2608)
 - Webpacker's wrapper to the `splitChunks()` API will now default `runtimeChunk: 'single'` which will help prevent potential issues when using multiple entry points per page [#2708](https://github.com/rails/webpacker/pull/2708).
 - Changes `@babel/preset-env` modules option to `'auto'` per recommendation in the Babel docs [#2709](https://github.com/rails/webpacker/pull/2709)
 - Adds experimental Yarn 2 support. Note you must manually set `nodeLinker: node-modules` in your `.yarnrc.yml`.
 
-### Breaking changes
-
-- Simple webpack config
-- Removed integration installers
-- Splitchunks enabled by default
-- CSS extraction enabled by default
-- Optional CSS support
-
-Please see upgrade [guide](./6_0_upgrade.md)
-
 ## [[5.2.1]](https://github.com/rails/webpacker/compare/v5.2.0...5.2.1) - 2020-08-17
 
 - Revert [#1311](https://github.com/rails/webpacker/pull/1311).
@@ -358,7 +346,7 @@ const { environment } = require('@rails/webpacker')
 // Enable with default config
 environment.splitChunks()
 // Configure via a callback
-environment.splitChunks((config) =>
+environment.splitChunks(config =>
   Object.assign({}, config, { optimization: { splitChunks: false } })
 )
 ```
@@ -682,9 +670,7 @@ environment.resolvedModules.append('vendor', 'vendor')
 ```js
 // Enable css modules with sass loader
 const sassLoader = environment.loaders.get('sass')
-const cssLoader = sassLoader.use.find(
-  (loader) => loader.loader === 'css-loader'
-)
+const cssLoader = sassLoader.use.find(loader => loader.loader === 'css-loader')
 
 cssLoader.options = Object.assign({}, cssLoader.options, {
   modules: true,

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    webpacker (6.0.0.beta.2)
+    webpacker (6.0.0.pre.1)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)

data/README.md

@@ -9,7 +9,7 @@
 [![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://rubygems.org/gems/webpacker)
 
 Webpacker makes it easy to use the JavaScript pre-processor and bundler
-[webpack 5.x.x+](https://webpack.js.org/)
+[webpack 4.x.x+](https://webpack.js.org/)
 to manage application-like JavaScript in Rails. It coexists with the asset pipeline,
 as the primary purpose for webpack is app-like JavaScript, not images, CSS, or
 even JavaScript Sprinkles (that all continues to live in app/assets).
@@ -32,6 +32,16 @@ in which case you may not even need the asset pipeline. This is mostly relevant
   - [Webpack Configuration](#webpack-configuration)
   - [Custom Rails environments](#custom-rails-environments)
   - [Upgrading](#upgrading)
+- [Integrations](#integrations)
+  - [React](./docs/integrations.md#react)
+  - [Angular with TypeScript](./docs/integrations.md#angular-with-typescript)
+  - [Vue](./docs/integrations.md#vue)
+  - [Elm](./docs/integrations.md#elm)
+  - [Stimulus](./docs/integrations.md#stimulus)
+  - [Svelte](./docs/integrations.md#svelte)
+  - [Typescript](./docs/typescript.md)
+  - [CoffeeScript](./docs/integrations.md#coffeescript)
+  - [Erb](./docs/integrations.md#erb)
 - [Paths](#paths)
   - [Resolved](#resolved)
   - [Watched](#watched)
@@ -46,28 +56,23 @@ in which case you may not even need the asset pipeline. This is mostly relevant
 
 - Ruby 2.4+
 - Rails 5.2+
-- Node.js 10.22.1+ || 12+ || 14+
+- Node.js 10.17.0+ || 12+ || 14+
 - Yarn 1.x+
 
 ## Features
 
-- [webpack 5.x.x](https://webpack.js.org/)
+- [webpack 4.x.x](https://webpack.js.org/)
 - ES6 with [babel](https://babeljs.io/)
 - Automatic code splitting using multiple entry points
+- Stylesheets - Sass and CSS
+- Images and fonts
+- PostCSS - Auto-Prefixer
 - Asset compression, source-maps, and minification
 - CDN support
+- React, Angular, Elm and Vue support out-of-the-box
 - Rails view helpers
 - Extensible and configurable
 
-  ### Optional support\*
-
-  _requires extra packages to be installed_
-
-  - Stylesheets - SASS, LESS and CSS, PostCSS
-  - Coffeescript
-  - Typescript
-  - React
-
 ## Installation
 
 You can either add Webpacker during setup of a new Rails 5.1+ application
@@ -82,11 +87,12 @@ Or add it to your `Gemfile`:
 
 ```ruby
 # Gemfile
-gem 'webpacker', '~> 6.x'
+gem 'webpacker', '~> 5.x'
 
 # OR if you prefer to use master
 gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
 yarn add https://github.com/rails/webpacker.git
+yarn add core-js regenerator-runtime
 ```
 
 Finally, run the following to install Webpacker:
@@ -129,11 +135,19 @@ app/javascript:
       └── logo.svg
 ```
 
-You can then link the JavaScript pack in Rails views using the `javascript_packs_with_chunks_tag` helper. If you have styles imported in your pack file, you can link them by using `stylesheet_packs_with_chunks_tag`:
+In `/packs/application.js`, include this at the top of the file:
+
+```js
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+```
+
+You can then link the JavaScript pack in Rails views using the `javascript_pack_tag` helper.
+If you have styles imported in your pack file, you can link them by using `stylesheet_pack_tag`:
 
 ```erb
-<%= javascript_packs_with_chunks_tag 'application' %>
-<%= stylesheet_packs_with_chunks_tag 'application' %>
+<%= javascript_pack_tag 'application' %>
+<%= stylesheet_pack_tag 'application' %>
 ```
 
 If you want to link a static asset for `<link rel="prefetch">` or `<img />` tag, you
@@ -144,6 +158,31 @@ can use the `asset_pack_path` helper:
 <img src="<%= asset_pack_path 'images/logo.svg' %>" />
 ```
 
+If you are using new webpack 4 split chunks API, then consider using `javascript_packs_with_chunks_tag` helper, which creates html
+tags for a pack and all the dependent 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 `javascript_packs_with_chunks_tag`
+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' %>
+```
+
 **Note:** In order for your styles or static assets files to be available in your view,
 you would need to link them in your "pack" or entry file.
 
@@ -209,207 +248,7 @@ WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server
 
 ### Webpack Configuration
 
-Webpacker gives you a default set of configuration files for test, development and
-production environments in `config/webpack/*.js`. You can configure each individual
-environment in their respective files or configure them all in the base
-`config/webpack/environment.js` file.
-
-By default, you don't need to make any changes to `config/webpack/*.js`
-files since it's all standard production-ready configuration. However,
-if you do need to customize or add a new loader, this is where you would go.
-
-Here is how you can modify webpack configuration:
-
-You might add separate files to keep your code more organized.
-
-```js
-// config/webpack/custom.js
-module.exports = {
-  resolve: {
-    alias: {
-      jquery: 'jquery/src/jquery',
-      vue: 'vue/dist/vue.js',
-      React: 'react',
-      ReactDOM: 'react-dom',
-      vue_resource: 'vue-resource/dist/vue-resource'
-    }
-  }
-}
-```
-
-Then `require` this file in your `config/webpack/base.js`:
-
-```js
-// config/webpack/base.js
-const { webpackConfig, merge } = require('@rails/webpacker')
-const customConfig = require('./custom')
-
-module.exports = merge(webpackConfig, customConfig)
-```
-
-If you need access to configs within Webpacker's configuration,
-you can import them like so:
-
-```js
-// config/webpack/base.js
-const { webpackConfig } = require('@rails/webpacker')
-
-console.log(webpackConfig.output_path)
-console.log(webpackConfig.source_path)
-```
-
-### Integrations
-
-Webpacker out of the box supports JS and static assets (fonts, images etc.)
-compilation. To enable support for Coffeescript or Typescript install
-relevant packages,
-
-**Coffeescript**
-
-```
-yarn add coffeescript coffee-loader
-```
-
-**Typescript**
-
-```
-yarn add typescript @babel/preset-typescript
-```
-
-Add tsconfig.json
-
-```json
-{
-  "compilerOptions": {
-    "declaration": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es6", "dom"],
-    "module": "es6",
-    "moduleResolution": "node",
-    "baseUrl": ".",
-    "paths": {
-      "*": ["node_modules/*", "app/javascript/*"]
-    },
-    "sourceMap": true,
-    "target": "es5",
-    "noEmit": true
-  },
-  "exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"],
-  "compileOnSave": false
-}
-```
-
-#### CSS
-
-To enable CSS support in your application, add following packages,
-
-```
-yarn add css-loader mini-css-extract-plugin css-minimizer-webpack-plugin
-```
-
-optionally, add css extension to webpack config for easy resolution
-
-```js
-// config/webpack/base.js
-const { webpackConfig, merge } = require('@rails/webpacker')
-const customConfig = {
-  resolve: {
-    extensions: ['.css']
-  }
-}
-
-module.exports = merge(webpackConfig, customConfig)
-```
-
-To enable postcss, sass or less support, add css support first and
-then add the relevant pre-processors:
-
-#### Postcss
-
-```
-yarn add postcss-loader
-```
-
-#### Sass
-
-```
-yarn add sass sass-loader
-```
-
-#### Less
-
-```
-yarn add less less-loader
-```
-
-#### Less
-
-```
-yarn add stylus stylus-loader
-```
-
-#### React
-
-React is supported and you just need to add relevant packages,
-
-```
-yarn add react react-dom @babel/preset-react
-```
-
-if you are using typescript, update your `tsconfig.json`
-
-```json
-{
-  "compilerOptions": {
-    "declaration": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es6", "dom"],
-    "module": "es6",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "target": "es5",
-    "jsx": "react",
-    "noEmit": true
-  },
-  "exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"],
-  "compileOnSave": false
-}
-```
-
-#### Other frameworks
-
-Please follow webpack integration guide for relevant framework or library,
-
-1. Svelte - https://github.com/sveltejs/svelte-loader#install
-2. Angular - https://v2.angular.io/docs/ts/latest/guide/webpack.html#!#configure-webpack
-3. Vue - https://vue-loader.vuejs.org/guide/
-
-For example to add Vue support,
-
-```js
-// config/webpack/rules/vue.js
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      }
-    ]
-  },
-  plugins: [new VueLoaderPlugin()]
-}
-
-// config/webpack/base.js
-const { webpackConfig, merge } = require('@rails/webpacker')
-const vueConfig = require('./rules/vue')
-
-module.exports = merge(webpackConfig, vueConfig)
-```
+See [docs/webpack](docs/webpack.md) for modifying webpack configuration and loaders.
 
 ### Custom Rails environments
 
@@ -474,6 +313,24 @@ yarn upgrade webpack-dev-server --latest
 yarn add @rails/webpacker@next
 ```
 
+## Integrations
+
+Webpacker ships with basic out-of-the-box integration. You can see a list of available commands/tasks by running `bundle exec rails webpacker`.
+
+Included install integrations:
+
+- [React](./docs/integrations.md#React)
+- [Angular with TypeScript](./docs/integrations.md#Angular-with-TypeScript)
+- [Vue](./docs/integrations.md#Vue)
+- [Elm](./docs/integrations.md#Elm)
+- [Svelte](./docs/integrations.md#Svelte)
+- [Stimulus](./docs/integrations.md#Stimulus)
+- [CoffeeScript](./docs/integrations.md#CoffeeScript)
+- [Typescript](./docs/typescript.md)
+- [Erb](./docs/integrations.md#Erb)
+
+See [Integrations](./docs/integrations.md) for further details.
+
 ## Paths
 
 By default, Webpacker ships with simple conventions for where the JavaScript
@@ -509,7 +366,7 @@ development:
 
 If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
 
-### Additional paths
+### Resolved
 
 If you are adding Webpacker to an existing app that has most of the assets inside
 `app/assets` or inside an engine, and you want to share that
@@ -518,7 +375,7 @@ option available in `config/webpacker.yml`. This lets you
 add additional paths that webpack should lookup when resolving modules:
 
 ```yml
-additional_paths: ['app/assets/**/*', 'vendor/assets/**/*.css', 'Gemfile']
+additional_paths: ['app/assets']
 ```
 
 You can then import these items inside your modules like so:
@@ -539,6 +396,26 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
 
 When compiling assets for production on a remote server, such as a continuous integration environment, it's recommended to use `yarn install --frozen-lockfile` to install NPM packages on the remote host to ensure that the installed packages match the `yarn.lock` file.
 
+## Docs
+
+- [Development](https://github.com/rails/webpacker#development)
+  - [Webpack](./docs/webpack.md)
+  - [Webpack-dev-server](./docs/webpack-dev-server.md)
+  - [Environment Variables](./docs/env.md)
+  - [Folder Structure](./docs/folder-structure.md)
+  - [Assets](./docs/assets.md) - [CSS, Sass and SCSS](./docs/css.md) - [ES6](./docs/es6.md), [Target browsers](./docs/target.md)
+    - [Props](./docs/props.md)
+    - [Typescript](./docs/typescript.md)
+  - [Yarn](./docs/yarn.md)
+  - [Misc](./docs/misc.md)
+- [Deployment](./docs/deployment.md)
+  - [Docker](./docs/docker.md)
+  - [Using in Rails engines](./docs/engines.md)
+  - [Webpacker on Cloud9](./docs/cloud9.md)
+- [Testing](./docs/testing.md)
+- [Troubleshooting](./docs/troubleshooting.md)
+- [v3 to v4 Upgrade Guide](./docs/v4-upgrade.md)
+
 ## Contributing
 
 [![Code Helpers](https://www.codetriage.com/rails/webpacker/badges/users.svg)](https://www.codetriage.com/rails/webpacker)