webpacker 6.0.0.pre.2 → 6.0.0.rc.1

data/docs/css.md

@@ -1,303 +0,0 @@
-# CSS, Sass and SCSS
-
-Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScript files.
-
-Importing and loading styles is a two step process:
-
-1. You need to tell webpack which file(s) it has to compile and know how to load
-
-   When you do `import '../scss/application.scss'`, you're telling webpack to include `application.scss` in the build. This does not mean it's going to be compiled into your javascript, only that webpack now compiles and knows how to load this file. (How that file compilation is handled is depending on how your loaders (`css-loader`, `sass-loader`, `file-loader`, etc.) are configured.)
-
-2. You need to load those files in your views
-
-   In order to have styles load in production, you need to include `stylesheet_pack_tag` with the same name as the javascript file that imports the styles.
-
-   When you do `<%= stylesheet_pack_tag 'application' %>`, that's a run-time inclusion from Rails, where Rails gets the correct "asset path" to that file from webpack.
-
-## Import global styles into your JS app
-
-### Importing CSS as a multi-file pack (Webpacker v5)
-
-When you add a CSS/SCSS/SASS file to `app/javascript/packs/` directory, make sure to use the same pack name as its complementary JavaScript pack, e.g. `application.js` and `application.css`. By Webpacker convention (as of Webpacker v5), this will bundle `application.js` and `application.scss` as part of the same entry point (also described as [a multi-file entry point in the webpack docs](https://webpack.js.org/concepts/entry-points/#single-entry-shorthand-syntax)). With this approach, you can avoid importing CSS from JS, if desired.
-
-```
-app/
-  javascript/
-    packs/
-      application.js
-      application.scss
-```
-
-### Importing CSS from CSS
-
-You can import additional CSS/SCSS/SASS files from within a CSS file:
-
-```
-app/
-  javascript/
-    stylesheets/
-      application.scss
-      posts.scss
-      comments.scss
-```
-
-```css
-/* app/javascript/stylesheets/application.scss */
-
-@import './posts';
-@import './comments';
-```
-
-### Importing CSS provided by an NPM package from SCSS/CSS
-
-Given your application installs an NPM package that provides CSS, such as `flatpickr`, you can import the CSS file(s) by path from the package directory within `node_modules/`:
-
-```js
-/* app/javascript/stylesheets/application.scss */
-
-@import "flatpickr/dist/flatpickr.css"
-```
-
-### Importing CSS from JS
-
-```sass
-// app/javascript/hello_react/styles/hello-react.sass
-
-.hello-react
-  padding: 20px
-  font-size: 12px
-```
-
-```js
-// React component example
-// app/javascript/packs/hello_react.jsx
-
-import React from 'react'
-import helloIcon from '../hello_react/images/icon.png'
-import '../hello_react/styles/hello-react'
-
-const Hello = (props) => (
-  <div className='hello-react'>
-    <img src={helloIcon} alt='hello-icon' />
-    <p>Hello {props.name}!</p>
-  </div>
-)
-```
-
-### Importing CSS provided by an NPM package from JS
-
-Given your application installs an NPM package that provides CSS, such as `flatpickr`, you can import the CSS file(s) by path from the package directory within `node_modules/`. This is an alternative to importing from within a CSS file, as above:
-
-```js
-// app/javascript/packs/application.js
-
-import 'flatpickr/dist/flatpickr.css'
-```
-
-## Import scoped styles into your JS app
-
-Stylesheets that end with `.module.*` are treated as [CSS Modules](https://github.com/css-modules/css-modules).
-
-```sass
-// app/javascript/hello_react/styles/hello-react.module.sass
-
-.helloReact
-  padding: 20px
-  font-size: 12px
-```
-
-```js
-// React component example
-// app/javascript/packs/hello_react.jsx
-
-import React from 'react'
-import helloIcon from '../hello_react/images/icon.png'
-import styles from '../hello_react/styles/hello-react'
-
-const Hello = (props) => (
-  <div className={styles.helloReact}>
-    <img src={helloIcon} alt='hello-icon' />
-    <p>Hello {props.name}!</p>
-  </div>
-)
-```
-
-**Note:** Declared class is referenced as object property in JavaScript.
-
-## Import scoped styles into your TypeScript app
-
-Using CSS modules with a TypeScript application requires a few differences from a JavaScript app. The CSS / Sass files are the same:
-
-```sass
-// app/javascript/hello_react/styles/hello-react.module.sass
-
-.helloReact
-  padding: 20px
-  font-size: 12px
-```
-
-There must also be a type definition file for these styles:
-
-```typescript
-export const helloReact: string
-```
-
-You can then import the styles like this:
-
-```typescript
-// React component example
-// app/javascripts/packs/hello_react.tsx
-
-import React from 'react'
-import helloIcon from '../hello_react/images/icon.png'
-import * as styles from '../hello_react/styles/hello-react.module.sass'
-
-const Hello = (props) => (
-  <div className={styles.helloReact}>
-    <img src={helloIcon} alt='hello-icon' />
-    <p>Hello {props.name}!</p>
-  </div>
-)
-```
-
-You can automatically generate type definitions for the styles by installing the `typed-scss-modules` as a development dependency:
-
-```
-yarn add typed-scss-modules --dev
-```
-
-Then by adding these lines to your `package.json`:
-
-```
-"scripts": {
-  "gen-typings": "yarn run tsm app/javascript/**/*.sass",
-  "watch-typings": "yarn run tsm app/javascript/**/*.sass -w"
-},
-```
-
-You can generate the typings for the stylesheet by running the command `yarn gen-typings` when you've finished writing CSS, or run `yarn watch-typings` to have it automatically generate them as you go.
-
-## Link styles from your Rails views
-
-Under the hood webpack uses
-[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) plugin to extract all the referenced styles within your app and compile it into
-a separate `[pack_name].css` bundle so that in your view you can use the
-`stylesheet_pack_tag` helper.
-
-```erb
-<%= stylesheet_pack_tag 'hello_react' %>
-```
-
-## Add bootstrap
-
-You can use Yarn to add bootstrap or any other modules available on npm:
-
-```bash
-yarn add bootstrap
-```
-
-Import Bootstrap and theme (optional) CSS in your app/javascript/packs/application.js file:
-
-```js
-import 'bootstrap/dist/css/bootstrap'
-import 'bootstrap/dist/css/bootstrap-theme'
-```
-
-Or in your app/javascript/packs/application.sass file:
-
-```sass
-// ~ to tell that this is not a relative import
-
-@import '~bootstrap/dist/css/bootstrap'
-@import '~bootstrap/dist/css/bootstrap-theme'
-```
-
-## Post-Processing CSS
-
-Webpacker out-of-the-box provides CSS post-processing using
-[postcss-loader](https://github.com/postcss/postcss-loader)
-and the installer sets up a standard `postcss.config.js`
-file in your app root with standard plugins.
-
-```js
-module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-flexbugs-fixes'),
-    require('postcss-preset-env')({
-      autoprefixer: {
-        flexbox: 'no-2009'
-      },
-      stage: 3
-    })
-  ]
-}
-```
-
-## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)
-
-Vue templates require loading the stylesheet in your application in
-order for CSS to work. This is in addition to loading the JavaScript
-file for the entry point. Loading the stylesheet will also load the
-CSS for any nested components.
-
-```erb
-<%= stylesheet_pack_tag 'hello_vue' %>
-<%= javascript_pack_tag 'hello_vue' %>
-```
-
-## Resolve url loader
-
-Since `Sass/libsass` does not provide url rewriting, all linked assets must be relative to the output. Add the missing url rewriting using the resolve-url-loader. Place it directly after the sass-loader in the loader chain.
-
-```bash
-yarn add resolve-url-loader
-```
-
-```js
-// webpack/environment.js
-const { environment } = require('@rails/webpacker')
-
-// resolve-url-loader must be used before sass-loader
-environment.loaders.get('sass').use.splice(-1, 0, {
-  loader: 'resolve-url-loader'
-})
-
-module.exports = environment
-```
-
-## Working with TypeScript
-
-In order to get CSS to work with typescript you have two options.
-You can either use `require` to bypass typescript special `import`.
-
-```ts
-const styles = require('../hello_react/styles/hello-react')
-```
-
-You may also use the package [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) instead of `css-loader` to automatically generate typescript `.d.ts` files in order to help resolve any css/scss styles. To do that:
-
-```js
-// app/javascript/packs/hello_react.jsx
-import * as styles from '../hello_react.styles/hello-react.module.scss'
-```
-
-```bash
-yarn add --dev typings-for-css-modules-loader
-```
-
-```js
-// webpack/environment.js
-const { environment } = require('@rails/webpacker')
-
-// replace css-loader with typings-for-css-modules-loader
-environment.loaders.get('moduleSass').use = environment.loaders
-  .get('moduleSass')
-  .use.map((u) => {
-    if (u.loader == 'css-loader') {
-      return { ...u, loader: 'typings-for-css-modules-loader' }
-    } else {
-      return u
-    }
-  })
-```

data/docs/docker.md

@@ -1,68 +0,0 @@
-# Docker
-
-To setup webpacker with a dockerized Rails application.
-
-First, add a new service for webpacker in docker-compose.yml:
-
-```Dockerfile
-version: '3'
-services:
-  webpacker:
-    build: .
-    environment:
-      - NODE_ENV=development
-      - RAILS_ENV=development
-      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
-    command: ./bin/webpack-dev-server
-    volumes:
-      - .:/webpacker-example-app
-    ports:
-      - '127.0.0.1:3035:3035'
-```
-
-add nodejs and yarn as dependencies in Dockerfile,
-
-```dockerfile
-FROM ruby:2.4.1
-
-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 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....
-```
-
-then add the webpacker host name environment variable to the web/app service:
-
-```Dockerfile
-  web:
-    build:
-      context: .
-    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
-    volumes:
-      - .:/usr/src/app
-    ports:
-      - "127.0.0.1:3000:3000"
-    environment:
-      - WEBPACKER_DEV_SERVER_HOST=webpacker
-```
-
-Lastly, rebuild your container:
-
-```bash
-docker-compose up --build
-```

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 `lib/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`.