webpacker 5.4.0 → 6.0.0.rc.6

data/docs/engines.md

@@ -1,213 +0,0 @@
-# Using in Rails engines
-
-If the application UI consists of multiple frontend application, you'd probably like to isolate their building too (e.g. if you use different frameworks/versions). Hence we needed our webpack(-er) to be isolated too: separate `package.json`, dev server, compilation process.
-
-You can do this by adding another Webpacker instance to your application.
-
-This guide describes how to do that using [Rails engines](https://guides.rubyonrails.org/engines.html).
-
-
-## Step 1: create Rails engine.
-
-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.
-
-There is no built-in tasks to install Webpacker within the engine, thus you have to add all the require files manually (you can copy them from the main app):
-- Add `config/webpacker.yml` and `config/webpack/*.js` files
-- Add `bin/webpack` and `bin/webpack-dev-server` files
-- Add `package.json` with required deps.
-
-
-## Step 3: configure Webpacker instance.
-
-- File `lib/my_engine.rb`
-
-```ruby
-module MyEngine
-  ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
-
-  class << self
-    def webpacker
-      @webpacker ||= ::Webpacker::Instance.new(
-        root_path: ROOT_PATH,
-        config_path: ROOT_PATH.join("config/webpacker.yml")
-      )
-    end
-  end
-end
-```
-
-## Step 4: Configure dev server proxy.
-
-- File `lib/my_engine/engine.rb`
-
-```ruby
-module MyEngine
-  class Engine < ::Rails::Engine
-    initializer "webpacker.proxy" do |app|
-        insert_middleware = begin
-                            MyEngine.webpacker.config.dev_server.present?
-                          rescue
-                            nil
-                          end
-        next unless insert_middleware
-
-        app.middleware.insert_before(
-          0, Webpacker::DevServerProxy, # "Webpacker::DevServerProxy" if Rails version < 5
-          ssl_verify_none: true,
-          webpacker: MyEngine.webpacker
-        )
-      end
-  end
-end
-```
-
-If you have multiple webpackers, you would probably want to run multiple dev servers at a time, and hence be able to configure their setting through env vars (e.g. within a `docker-compose.yml` file):
-
-```yml
-# webpacker.yml
-# ...
-development:
-  # ...
-  dev_server:
-    env_prefix: "MY_ENGINE_WEBPACKER_DEV_SERVER"
-    # ...
-```
-
-## Step 5: configure helper.
-
-- File `app/helpers/my_engine/application_helper.rb`
-
-```ruby
-require "webpacker/helper"
-
-module MyEngine
-  module ApplicationHelper
-    include ::Webpacker::Helper
-
-    def current_webpacker_instance
-      MyEngine.webpacker
-    end
-  end
-end
-```
-
-Now you can use `stylesheet_pack_tag` and `javascript_pack_tag` from within your engine.
-
-## Step 6: rake tasks.
-
-Add Rake task to compile assets in production (`rake my_engine:webpacker:compile`)
-
-- 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"
-    task :yarn_install do
-      Dir.chdir(File.join(__dir__, "../..")) do
-        system "yarn install --no-progress --production"
-      end
-    end
-
-    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.
-
-There are two approaches on serving compiled assets.
-
-### Put engine's assets to the root app's public/ folder
-
-You can serve engine's assets using the main app's static files server which serves files from `public/` folder.
-
-For that you must configure your engine's webpacker to put compiled assets to the app's `public/` folder:
-
-```yml
-# my_engine/config/webpacker.yml
-default: &default
-  # ...
-  # public_root_path could be used to override the path to `public/` folder
-  # (relative to the engine root)
-  public_root_path: ../public
-  # use a different sub-folder name
-  public_output_path: my-engine-packs
-```
-
-### Use a separate middleware
-
-To serve static assets from the engine's `public/` folder you must add a middleware and point it to your engine's webpacker output path:
-
-```ruby
-# application.rb
-
-config.middleware.use(
-  Rack::Static,
-  urls: ["/my-engine-packs"], root: "my_engine/public"
-)
-```
-or if you prefer to keep your engine-related configuration within the engine itself
-
-```ruby
-# my-engine-root/lib/my-engine/engine.rb
-module MyEngine
-  class Engine < ::Rails:Engine
-    config.app_middleware.use(
-      Rack::Static,
-      urls: ["/my-engine-packs"], root: "my_engine/public"
-    )
-  end
-end
-```
-
-**NOTE:** in the example above we assume that your `public_output_path` is set to `my-engine-packs` in your engine's `webpacker.yml`.

data/docs/env.md

@@ -1,63 +0,0 @@
-# Environment variables
-
-
-Environment variables are supported out of the box in Webpacker. For example if
-you run the webpack dev server like so:
-```
-FOO=hello BAR=world ./bin/webpack-dev-server
-```
-
-You can then reference these variables in your JavaScript app code with
-`process.env`:
-
-```js
-console.log(process.env.FOO) // Compiles to console.log("hello")
-```
-
-You may want to store configuration in environment variables via `.env` files,
-similar to the [dotenv Ruby gem](https://github.com/bkeepers/dotenv).
-
-In development, if you use [Foreman](http://ddollar.github.io/foreman) or [Invoker](http://invoker.codemancers.com)
-to launch the webpack server, both of these tools have basic support for a
-`.env` file (Invoker also supports `.env.local`), so no further configuration
-is needed.
-
-However, if you run the webpack server without Foreman/Invoker, or if you
-want more control over what `.env` files to load, you can use the
-[dotenv npm package](https://github.com/motdotla/dotenv). Here is what you could
-do to support a "Ruby-like" dotenv:
-
-```
-yarn add dotenv
-```
-
-```javascript
-// config/webpack/environment.js
-
-...
-const { environment } = require('@rails/webpacker')
-const webpack = require('webpack')
-const dotenv = require('dotenv')
-
-const dotenvFiles = [
-  `.env.${process.env.NODE_ENV}.local`,
-  '.env.local',
-  `.env.${process.env.NODE_ENV}`,
-  '.env'
-]
-dotenvFiles.forEach((dotenvFile) => {
-  dotenv.config({ path: dotenvFile, silent: true })
-})
-
-module.exports = environment
-```
-
-**Warning:** using Foreman/Invoker and npm dotenv at the same time can result in
-confusing behavior, in that Foreman/Invoker variables take precedence over
-npm dotenv variables.
-
-If you'd like to pass custom variables to the on demand compiler, use `Webpacker::Compiler.env` attribute.
-
-```rb
-Webpacker::Compiler.env['FRONTEND_API_KEY'] = 'your_secret_key'
-```

data/docs/es6.md

@@ -1,72 +0,0 @@
-# ES6
-
-## Babel
-
-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 `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:
-
-* Async/await.
-* Object Rest/Spread Properties.
-* Exponentiation Operator.
-* Dynamic import() - useful for route level code-splitting
-* Class Fields and Static Properties.
-
-We have also included [core-js](https://github.com/zloirock/core-js) to polyfill features in the
-older browsers.
-
-Don't forget to add these lines into your main entry point:
-
-```js
-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()
-
-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.
-
-```js
-import Button from 'react-bootstrap/lib/Button'
-
-// or
-import { Button } from 'react-bootstrap'
-
-class Foo {
-  // code...
-}
-
-export default Foo
-import Foo from './foo'
-```
-
-You can also use named export and import
-
-```js
-export const foo = () => console.log('hello world')
-import { foo } from './foo'
-```

data/docs/folder-structure.md

@@ -1,66 +0,0 @@
-# Folder Structure
-
-
-## Packs a.k.a webpack entries
-
-"Packs" is a special directory made only for webpack entry files so don't put anything
-here that you don't want to link in your views.
-
-
-## Source
-
-You can put your app source under `app/javascript` folder or whatever you have configured
-in `config/webpacker.yml`.
-
-
-## Example
-
-Let's say you're building a calendar app. Your JS app structure could look like this:
-
-```js
-// app/javascript/packs/calendar.js
-
-import 'calendar'
-```
-
-```
-app/javascript/calendar/index.js // gets loaded by import 'calendar'
-app/javascript/calendar/components/grid.jsx
-app/javascript/calendar/styles/grid.sass
-app/javascript/calendar/models/month.js
-```
-
-```erb
-<%# app/views/layouts/application.html.erb %>
-
-<%= javascript_pack_tag 'calendar' %>
-<%= stylesheet_pack_tag 'calendar' %>
-```
-
-But it could also look a million other ways.
-
-
-## Namespacing
-
-You can also namespace your packs using directories similar to a Rails app.
-
-```
-app/javascript/packs/admin/orders.js
-app/javascript/packs/shop/orders.js
-```
-
-and reference them in your views like this:
-
-```erb
-<%# app/views/admin/orders/index.html.erb %>
-
-<%= javascript_pack_tag 'admin/orders' %>
-```
-
-and
-
-```erb
-<%# app/views/shop/orders/index.html.erb %>
-
-<%= javascript_pack_tag 'shop/orders' %>
-```

data/docs/integrations.md

@@ -1,220 +0,0 @@
-# Integrations
-
-Webpacker ships with basic out-of-the-box integration for React, Angular, Vue and Elm.
-You can see a list of available commands/tasks by running `bundle exec rails webpacker`:
-
-## React
-
-To use Webpacker with [React](https://facebook.github.io/react/), create a
-new Rails 5.1+ app using `--webpack=react` option:
-
-```bash
-# Rails 5.1+
-rails new myapp --webpack=react
-```
-
-(or run `bundle exec rails webpacker:install:react` in an existing Rails app already
-setup with Webpacker).
-
-The installer will add all relevant dependencies using Yarn, changes
-to the configuration files, and an example React component to your
-project in `app/javascript/packs` so that you can experiment with React right away.
-
-
-## Angular with TypeScript
-
-To use Webpacker with [Angular](https://angular.io/), create a
-new Rails 5.1+ app using `--webpack=angular` option:
-
-```bash
-# Rails 5.1+
-rails new myapp --webpack=angular
-```
-
-(or run `bundle exec rails webpacker:install:angular` on a Rails app already
-setup with Webpacker).
-
-The installer will add the TypeScript and Angular core libraries using Yarn alongside
-a few changes to the configuration files. An example component written in
-TypeScript will also be added to your project in `app/javascript` so that
-you can experiment with Angular right away.
-
-By default, Angular uses a JIT compiler for development environment. This
-compiler is not compatible with restrictive CSP (Content Security
-Policy) environments like Rails 5.2+. You can use Angular AOT compiler
-in development with the [@ngtools/webpack](https://www.npmjs.com/package/@ngtools/webpack#usage) plugin.
-
-Alternatively if you're using Rails 5.2+ you can enable `unsafe-eval` rule for your
-development environment. This can be done in the `config/initializers/content_security_policy.rb`
-with the following code:
-
-```ruby
-Rails.application.config.content_security_policy do |policy|
-  if Rails.env.development?
-    policy.script_src :self, :https, :unsafe_eval
-  else
-    policy.script_src :self, :https
-  end
-end
-```
-
-
-## Vue
-
-To use Webpacker with [Vue](https://vuejs.org/), create a
-new Rails 5.1+ app using `--webpack=vue` option:
-
-```bash
-# Rails 5.1+
-rails new myapp --webpack=vue
-```
-(or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with Webpacker).
-
-The installer will add Vue and its required libraries using Yarn alongside
-automatically applying changes needed to the configuration files. An example component will
-be added to your project in `app/javascript` so that you can experiment with Vue right away.
-
-If you're using Rails 5.2+ you'll need to enable `unsafe-eval` rule for your development environment.
-This can be done in the `config/initializers/content_security_policy.rb` with the following
-configuration:
-
-```ruby
-Rails.application.config.content_security_policy do |policy|
-  if Rails.env.development?
-    policy.script_src :self, :https, :unsafe_eval
-  else
-    policy.script_src :self, :https
-  end
-end
-```
-You can read more about this in the [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
-
-### Lazy loading integration
-
-See [docs/es6](es6.md) to know more about Webpack and Webpacker configuration.
-
-For instance, you can lazy load Vue JS components:
-
-Before:
-```js
-import Vue from 'vue'
-import { VCard } from 'vuetify/lib'
-
-Vue.component('VCard', VCard)
-```
-
-After:
-```js
-import Vue from 'vue'
-
-// With destructuring assignment
-Vue.component('VCard', import('vuetify/lib').then(({ VCard }) => VCard)
-
-// Or without destructuring assignment
-Vue.component('OtherComponent', () => import('./OtherComponent'))
-```
-
-You can use it in a Single File Component as well:
-
-```html
-<template>
-  ...
-</template>
-
-<script>
-export default {
-  components: {
-    OtherComponent: () => import('./OtherComponent')
-  }
-}
-</script>
-```
-
-By wrapping the import function into an arrow function, Vue will execute it only when it gets requested, loading the module in that moment.
-
-##### Automatic registration
-
-```js
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/OtherComponent.vue -> <other-component></other-component>
- * Eg. ./UI/ButtonComponent.vue -> <button-component></button-component>
- */
-
-const files = require.context('./', true, /\.vue$/i)
-files.keys().map(key => {
-  const component = key.split('/').pop().split('.')[0]
-
-  // With Lazy Loading
-  Vue.component(component, () => import(`${key}`))
-
-  // Or without Lazy Loading
-  Vue.component(component, files(key).default)
-})
-```
-
-## Elm
-
-To use Webpacker with [Elm](http://elm-lang.org), create a
-new Rails 5.1+ app using `--webpack=elm` option:
-
-```
-# Rails 5.1+
-rails new myapp --webpack=elm
-```
-
-(or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with Webpacker).
-
-The Elm library and its core packages will be added via Yarn and Elm.
-An example `Main.elm` app will also be added to your project in `app/javascript`
-so that you can experiment with Elm right away.
-
-## Svelte
-
-To use Webpacker with [Svelte](https://svelte.dev), create a
-new Rails 5.1+ app using `--webpack=svelte` option:
-
-```
-# Rails 5.1+
-rails new myapp --webpack=svelte
-```
-
-(or run `bundle exec rails webpacker:install:svelte` on a Rails app already setup with Webpacker).
-
-Please play with the [Svelte Tutorial](https://svelte.dev/tutorial/basics) or learn more about its API at https://svelte.dev/docs
-
-## Stimulus
-
-To use Webpacker with [Stimulus](http://stimulusjs.org), create a
-new Rails 5.1+ app using `--webpack=stimulus` option:
-
-```
-# Rails 5.1+
-rails new myapp --webpack=stimulus
-```
-
-(or run `bundle exec rails webpacker:install:stimulus` on a Rails app already setup with Webpacker).
-
-Please read [The Stimulus Handbook](https://stimulusjs.org/handbook/introduction) or learn more about its source code at https://github.com/stimulusjs/stimulus
-
-## CoffeeScript
-
-To add [CoffeeScript](http://coffeescript.org/) support,
-run `bundle exec rails webpacker:install:coffee` on a Rails app already
-setup with Webpacker.
-
-An example `hello_coffee.coffee` file will also be added to your project
-in `app/javascript/packs` so that you can experiment with CoffeeScript right away.
-
-## Erb
-
-To add [Erb](https://apidock.com/ruby/ERB) support in your JS templates,
-run `bundle exec rails webpacker:install:erb` on a Rails app already
-setup with Webpacker.
-
-An example `hello_erb.js.erb` file will also be added to your project
-in `app/javascript/packs` so that you can experiment with Erb-flavoured
-javascript right away.

data/docs/misc.md

@@ -1,23 +0,0 @@
-# How-Tos
-
-
-## Ignoring swap files
-
-If you are using vim or emacs and want to ignore certain files you can add `ignore-loader`:
-
-```
-yarn add ignore-loader
-```
-
-and add `ignore-loader` to `config/webpack/environment.js`
-
-```js
-// ignores vue~ swap files
-const { environment } = require('@rails/webpacker')
-environment.loaders.append('ignore', {
-  test:  /.vue~$/,
-  loader: 'ignore-loader'
-})
-```
-
-And now all files with `.vue~` will be ignored by the webpack compiler.