webpacker-5.4.3/ 0000755 0000041 0000041 00000000000 14123265223 013516 5 ustar www-data www-data webpacker-5.4.3/Gemfile.lock 0000644 0000041 0000041 00000010663 14123265223 015746 0 ustar www-data www-data PATH
remote: .
specs:
webpacker (5.4.0)
activesupport (>= 5.2)
rack-proxy (>= 0.6.1)
railties (>= 5.2)
semantic_range (>= 2.3.0)
GEM
remote: https://rubygems.org/
specs:
actioncable (6.1.3.2)
actionpack (= 6.1.3.2)
activesupport (= 6.1.3.2)
nio4r (~> 2.0)
websocket-driver (>= 0.6.1)
actionmailbox (6.1.3.2)
actionpack (= 6.1.3.2)
activejob (= 6.1.3.2)
activerecord (= 6.1.3.2)
activestorage (= 6.1.3.2)
activesupport (= 6.1.3.2)
mail (>= 2.7.1)
actionmailer (6.1.3.2)
actionpack (= 6.1.3.2)
actionview (= 6.1.3.2)
activejob (= 6.1.3.2)
activesupport (= 6.1.3.2)
mail (~> 2.5, >= 2.5.4)
rails-dom-testing (~> 2.0)
actionpack (6.1.3.2)
actionview (= 6.1.3.2)
activesupport (= 6.1.3.2)
rack (~> 2.0, >= 2.0.9)
rack-test (>= 0.6.3)
rails-dom-testing (~> 2.0)
rails-html-sanitizer (~> 1.0, >= 1.2.0)
actiontext (6.1.3.2)
actionpack (= 6.1.3.2)
activerecord (= 6.1.3.2)
activestorage (= 6.1.3.2)
activesupport (= 6.1.3.2)
nokogiri (>= 1.8.5)
actionview (6.1.3.2)
activesupport (= 6.1.3.2)
builder (~> 3.1)
erubi (~> 1.4)
rails-dom-testing (~> 2.0)
rails-html-sanitizer (~> 1.1, >= 1.2.0)
activejob (6.1.3.2)
activesupport (= 6.1.3.2)
globalid (>= 0.3.6)
activemodel (6.1.3.2)
activesupport (= 6.1.3.2)
activerecord (6.1.3.2)
activemodel (= 6.1.3.2)
activesupport (= 6.1.3.2)
activestorage (6.1.3.2)
actionpack (= 6.1.3.2)
activejob (= 6.1.3.2)
activerecord (= 6.1.3.2)
activesupport (= 6.1.3.2)
marcel (~> 1.0.0)
mini_mime (~> 1.0.2)
activesupport (6.1.3.2)
concurrent-ruby (~> 1.0, >= 1.0.2)
i18n (>= 1.6, < 2)
minitest (>= 5.1)
tzinfo (~> 2.0)
zeitwerk (~> 2.3)
ast (2.4.2)
builder (3.2.4)
byebug (11.1.3)
concurrent-ruby (1.1.8)
crass (1.0.6)
erubi (1.10.0)
globalid (0.4.2)
activesupport (>= 4.2.0)
i18n (1.8.10)
concurrent-ruby (~> 1.0)
loofah (2.9.1)
crass (~> 1.0.2)
nokogiri (>= 1.5.9)
mail (2.7.1)
mini_mime (>= 0.1.1)
marcel (1.0.1)
method_source (1.0.0)
mini_mime (1.0.3)
mini_portile2 (2.5.1)
minitest (5.14.4)
nio4r (2.5.7)
nokogiri (1.11.4)
mini_portile2 (~> 2.5.0)
racc (~> 1.4)
parallel (1.20.1)
parser (3.0.1.1)
ast (~> 2.4.1)
racc (1.5.2)
rack (2.2.3)
rack-proxy (0.6.5)
rack
rack-test (1.1.0)
rack (>= 1.0, < 3)
rails (6.1.3.2)
actioncable (= 6.1.3.2)
actionmailbox (= 6.1.3.2)
actionmailer (= 6.1.3.2)
actionpack (= 6.1.3.2)
actiontext (= 6.1.3.2)
actionview (= 6.1.3.2)
activejob (= 6.1.3.2)
activemodel (= 6.1.3.2)
activerecord (= 6.1.3.2)
activestorage (= 6.1.3.2)
activesupport (= 6.1.3.2)
bundler (>= 1.15.0)
railties (= 6.1.3.2)
sprockets-rails (>= 2.0.0)
rails-dom-testing (2.0.3)
activesupport (>= 4.2.0)
nokogiri (>= 1.6)
rails-html-sanitizer (1.3.0)
loofah (~> 2.3)
railties (6.1.3.2)
actionpack (= 6.1.3.2)
activesupport (= 6.1.3.2)
method_source
rake (>= 0.8.7)
thor (~> 1.0)
rainbow (3.0.0)
rake (13.0.3)
regexp_parser (2.1.1)
rexml (3.2.5)
rubocop (0.93.1)
parallel (~> 1.10)
parser (>= 2.7.1.5)
rainbow (>= 2.2.2, < 4.0)
regexp_parser (>= 1.8)
rexml
rubocop-ast (>= 0.6.0)
ruby-progressbar (~> 1.7)
unicode-display_width (>= 1.4.0, < 2.0)
rubocop-ast (1.5.0)
parser (>= 3.0.1.1)
rubocop-performance (1.10.2)
rubocop (>= 0.90.0, < 2.0)
rubocop-ast (>= 0.4.0)
ruby-progressbar (1.11.0)
semantic_range (3.0.0)
sprockets (4.0.2)
concurrent-ruby (~> 1.0)
rack (> 1, < 3)
sprockets-rails (3.2.2)
actionpack (>= 4.0)
activesupport (>= 4.0)
sprockets (>= 3.0.0)
thor (1.1.0)
tzinfo (2.0.4)
concurrent-ruby (~> 1.0)
unicode-display_width (1.7.0)
websocket-driver (0.7.3)
websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5)
zeitwerk (2.4.2)
PLATFORMS
ruby
DEPENDENCIES
bundler (>= 1.3.0)
byebug
minitest (~> 5.0)
rack-proxy
rails
rake (>= 11.1)
rubocop (= 0.93.1)
rubocop-performance
semantic_range
webpacker!
BUNDLED WITH
2.2.3
webpacker-5.4.3/docs/ 0000755 0000041 0000041 00000000000 14123265223 014446 5 ustar www-data www-data webpacker-5.4.3/docs/target.md 0000644 0000041 0000041 00000001533 14123265223 016260 0 ustar www-data www-data # Target browsers
By default webpacker provides these front-end tools:
- [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)
- [Autoprefixer](https://github.com/postcss/autoprefixer)
- [postcss-preset-env](https://github.com/csstools/postcss-preset-env)
All these tools use [Browserslist](https://github.com/browserslist/browserslist) to detect which environment your users have
Webpacker browserslist default target:
```
defaults
```
`defaults`: `(> 0.5%, last 2 versions, Firefox ESR, not dead)`, [browserl.ist](https://browserl.ist/) is an online tool to check what browsers will be selected by some query.
To keep browsers data up to date, you need to run:
```bash
yarn upgrade caniuse-lite
```
at least once every few months, to prevent such [problems](https://github.com/browserslist/browserslist/issues/492)
webpacker-5.4.3/docs/deployment.md 0000644 0000041 0000041 00000011616 14123265223 017155 0 ustar www-data www-data # Deployment
Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`.
If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`. Remember to set NODE_ENV environment variable to production during deployment or when running the rake task.
The `javascript_pack_tag` and `stylesheet_pack_tag` helper method will automatically insert the correct HTML tag for compiled pack. Just like the asset pipeline does it.
By default the output will look like this in different environments:
```html
Hello {props.name}!
)
```
### 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 => (
Hello {props.name}!
)
```
**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 => (
Hello {props.name}!
)
```
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' %>
```
Webpacker emits css files only if `extract_css` is set to true in webpacker.yml otherwise `stylesheet_pack_tag` returns nil.
## 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;
}
});
```
webpacker-5.4.3/docs/env.md 0000644 0000041 0000041 00000003507 14123265223 015565 0 ustar www-data www-data # 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'
```
webpacker-5.4.3/docs/docker.md 0000644 0000041 0000041 00000003234 14123265223 016241 0 ustar www-data www-data # 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:
- '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:
- "3000:3000"
environment:
- WEBPACKER_DEV_SERVER_HOST=webpacker
```
Lastly, rebuild your container:
```bash
docker-compose up --build
```
webpacker-5.4.3/docs/webpack-dev-server.md 0000644 0000041 0000041 00000005543 14123265223 020473 0 ustar www-data www-data # webpack-dev-server
## HTTPS
If you're using the `webpack-dev-server` in development, you can serve your packs over HTTPS
by setting the `https` option for `webpack-dev-server` to `true` in `config/webpacker.yml`,
then start the dev server as usual with `./bin/webpack-dev-server`.
Please note that the `webpack-dev-server` will use a self-signed certificate,
so your web browser will display a warning/exception upon accessing the page. If you get
`https://localhost:3035/sockjs-node/info?t=1503127986584 net::ERR_INSECURE_RESPONSE`
in your console, simply open the link in your browser and accept the SSL exception.
Now if you refresh your Rails view everything should work as expected.
## HOT module replacement
Webpacker out-of-the-box supports HMR with `webpack-dev-server` and
you can toggle it by setting `dev_server/hmr` option inside `webpacker.yml`.
Check out this guide for more information:
- https://webpack.js.org/configuration/dev-server/#devserver-hot
To support HMR with React you would need to add `react-hot-loader`. Checkout this guide for
more information:
- https://gaearon.github.io/react-hot-loader/getstarted/
**Note:** Don't forget to disable `HMR` if you are not running `webpack-dev-server`
otherwise you will get not found error for stylesheets.
## Nginx
If you use Nginx in development to proxy requests to your Rails server from
another domain, like `myapp.dev`, the Webpacker middleware will be able to
forward requests for "packs" to the webpack dev server.
If you're using `inline` mode behind Nginx, you may also need to provide the
hostname to webpack dev server so it can initiate the websocket connection for
live reloading ([Webpack
docs](https://webpack.js.org/configuration/dev-server/#devserver-public)).
To do so, set the `public` option in `config/webpacker.yml`:
```yaml
development:
# ...
dev_server:
# ...
public: myapp.dev
```
You may also need to add the following location block to your local Nginx server
configuration for your Rails app.
```
server {
listen 80;
server_name myapp.dev
# Proxy webpack dev server websocket requests
location /sockjs-node {
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:3035; # change to match your webpack-dev-server host
}
# ...
}
```
## Customizing Logging
By default, the dev server will display a colored progress notification while
your code is being compiled. (Under the hood, we are using `webpack-dev-server
--progress --color`). However, this might cause issues if you don't use
`foreman` and/or try to log webpack-dev-server's output to a file. You can
disable this stylized output by adding `pretty: false` to your `dev_server`
config:
```yaml
development:
# ...
dev_server:
# ...
pretty: false
```
webpacker-5.4.3/docs/yarn.md 0000644 0000041 0000041 00000001425 14123265223 015743 0 ustar www-data www-data # Yarn
Webpacker by default uses `yarn` as a package manager for `node_modules`
## Add a new npm module
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.
webpacker-5.4.3/docs/cloud9.md 0000644 0000041 0000041 00000026134 14123265223 016175 0 ustar www-data www-data # Webpack dev server and Rails on Cloud9
**Please note that this article is particularly relevant when
migrating the [`webpacker`] gem from v3.0.1 to v3.0.2, as described in
the [below](#binstub-versions).**
[**`[Go to tl;dr]`**](#tldr)
## Contents
- [Context](#context)
- [Binstub versions](#binstub-versions)
- [Quick solution](#quick-solution)
- [Flexible solution](#flexible-solution)
- [Sources](#sources)
- [Versions](#versions)
- [tl;dr](#tldr)
## Context
This article describes how to properly configure
[`webpack-dev-server`] with [`webpacker`] gem on a [Cloud9] workspace.
After a preliminary remark about the proper binstub version of the
`./bin/webpack-dev-server` script, this article presents two ways to
tackle the task: a simple and [quick solution](#quick-solution), which
is sufficient if we work alone on a project, and a slightly more
involved but [flexible approach](#flexible-solution), that can be
useful when several people might work in the same codebase.
[Cloud9]: https://c9.io
[`webpack-dev-server`]: https://github.com/webpack/webpack-dev-server
[`webpacker`]: https://github.com/rails/webpacker
## Binstub versions
A lot of the confusion about the [`webpack-dev-server`] options and
why they might not be properly taken into account, might be due to an
outdated version of the `./bin/webpack-dev-server` script. The script
created by the `rails webpacker:install` task of the [`webpacker`] gem
v3.0.1 ([source][v3.0.1/lib/install/bin/webpack-dev-server.tt]) is not
compatible with how v3.0.2 (sic) of the gem handles the
[`webpack-dev-server`] option flags (see full list of
[versions](#versions) below), which logically expects the
corresponding [binstub version][#833] of the script
([source][v3.0.2/exe/webpack-dev-server]). So please make sure that
you are using the [correct binstub][v3.0.2/exe/webpack-dev-server]
(the same applies to [`./bin/webpack`][v3.0.2/exe/webpack]). To be
fair, the [changelog of v3.0.2] properly mentions the change:
> - Added: Binstubs [#833]
> - (...)
> - Removed: Inline CLI args for dev server binstub, use env variables
instead
[changelog of v3.0.2]: https://github.com/rails/webpacker/blob/v3.0.2/CHANGELOG.md#302---2017-10-04
[v3.0.1/lib/install/bin/webpack-dev-server.tt]: https://github.com/rails/webpacker/blob/v3.0.1/lib/install/bin/webpack-dev-server.tt
[v3.0.2/exe/webpack-dev-server]: https://github.com/rails/webpacker/blob/v3.0.2/exe/webpack-dev-server
[v3.0.2/exe/webpack]: https://github.com/rails/webpacker/blob/v3.0.2/exe/webpack
[#833]: https://github.com/rails/webpacker/pull/833/files
## Quick solution
If you are working alone, the easiest way to fix the configuration of
the [`webpack-dev-server`] is to modify the `development.dev_server`
entry of the `config/webpacker.yml` file.
### `config/webpacker.yml` file
The `development.dev_server` entry of the `config/webpacker.yml` file
has to be changed from the following default values:
```yaml
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
disable_host_check: true
use_local_ip: false
```
into these custom configuration:
```yaml
dev_server:
https: true
host: localhost
port: 8082
public: your-workspace-name-yourusername.c9users.io:8082
hmr: false
inline: false
overlay: true
disable_host_check: true
use_local_ip: false
```
You can obtain the value `your-workspace-name-yourusername.c9users.io`
for your [Cloud9] workspace with `echo ${C9_HOSTNAME}`.
There are four main differences with the approaches found in the
mentioned [sources](#sources):
- Some solutions suggested to set the [`host`][devserver-host] option
to `your-workspace-name-yourusername.c9users.io`, which required to
add a line to the `/etc/hosts` file by running `echo "0.0.0.0
${C9_HOSTNAME}" | sudo tee -a /etc/hosts`. This was only necessary
due to restrictions in previous versions of [`webpacker`] and how
the value of the [`public`][devserver-public] setting was
calculated. Currently it is [no longer necessary][pr-comment-hosts]
to modify the `/etc/hosts` file because the [`host`][devserver-host]
setting can be kept as `localhost`.
[pr-comment-hosts]: https://github.com/rails/webpacker/pull/1033#pullrequestreview-78992024
- Some solutions stressed the need to set the
[`https`][devserver-https] option to `false` but this failed with
`net::ERR_ABORTED` in the browser console and raised the following
exception in the server when the client tried to get the
JavaScript sources:
```
#
```
Setting `https: true` removes the issue.
- By leaving the [`inline`][devserver-inline] option to the default
`false` value, the live compilation still works but the browser
console constantly reports the following error:
```
Failed to load https://your-workspace-name-yourusername.c9users.io:8082/sockjs-node/info?t=1511016561187: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://your-workspace-name-yourusername.c9users.io' is therefore not allowed access. The response had HTTP status code 503.
```
Setting `inline: false` removes the issue.
- None of the solutions suggested to set the
[`public`][devserver-public] option in the `config/webpacker.yml`
file and some suggested to pass it to the `webpack-dev-server`
command line. By setting it in the configuration file we don't need
to care about it in the terminal.
[devserver-host]: https://webpack.js.org/configuration/dev-server/#devserver-host
[devserver-https]: https://webpack.js.org/configuration/dev-server/#devserver-https
[devserver-inline]: https://webpack.js.org/configuration/dev-server/#devserver-inline
[devserver-public]: https://webpack.js.org/configuration/dev-server/#devserver-public
With this configuration, running as usual `./bin/webpack-dev-server`
in one terminal and `./bin/rails s -b $IP -p $PORT` in another should
work.
## Flexible solution
The previous solution is useful and fast to implement, but if you are
working with other people on the same repo it can be tricky to
maintain the proper configuration in the `config/webpacker.yml` file.
Moreover, the hostname of your [Cloud9] workspace is hardcoded, so
that the configuration is not portable.
A hint about another way to configure the `webpack-dev-server` can be
found in the [README of this repo][`webpacker` documentation]:
> You can use environment variables as options supported by
> webpack-dev-server in the form `WEBPACKER_DEV_SERVER_`.
> Please note that these environment variables will always take
> precedence over the ones already set in the configuration file.
Note that when the configuration of the [`webpack-dev-server`] is
tweaked with ENV variables, those same values _have to be passed_ to
the `rails server` process as well in order to let it use the _same_
configuration.
Taking that into account, a flexible solution can be implemented using
[`foreman`] with the following `Procfile.dev`:
[`foreman`]: https://github.com/ddollar/foreman
```Procfile
web: ./bin/rails server -b ${RAILS_SERVER_BINDING:-localhost} -p ${RAILS_SERVER_PORT:-3000}
webpacker: ./bin/webpack-dev-server
```
and this `bin/start` script:
```bash
#!/bin/bash
# Immediately exit script on first error
set -e -o pipefail
APP_ROOT_FOLDER="$( cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd )"
cd "${APP_ROOT_FOLDER}"
if [ -n "${C9_USER}" ]; then
# We are in a Cloud9 machine
# Make sure that Postgres is running
sudo service postgresql status || sudo service postgresql start
# Adapt the configuration of the webpack-dev-server
export APP_DOMAIN="${C9_HOSTNAME}"
export RAILS_SERVER_BINDING='0.0.0.0'
export RAILS_SERVER_PORT='8080'
export WEBPACKER_DEV_SERVER_PORT='8082'
export WEBPACKER_DEV_SERVER_HTTPS='true'
export WEBPACKER_DEV_SERVER_HOST="localhost"
export WEBPACKER_DEV_SERVER_PUBLIC="${C9_HOSTNAME}:${WEBPACKER_DEV_SERVER_PORT}"
export WEBPACKER_DEV_SERVER_HMR='false'
export WEBPACKER_DEV_SERVER_INLINE='false'
export WEBPACKER_DEV_SERVER_OVERLAY='true'
export WEBPACKER_DEV_SERVER_DISABLE_HOST_CHECK='true'
export WEBPACKER_DEV_SERVER_USE_LOCAL_IP='false'
fi
foreman start -f Procfile.dev
```
With these two scripts in place, the application can always be started
by running `bin/start`, in both [Cloud9] and other systems. The
trick is that by exporting the `WEBPACKER_DEV_SERVER_*` variables
before calling `foreman start`, we make sure that those values are
available to both `webpack-dev-server` and `rails server` processes.
## Sources
- ["Webpack dev server and Rails on Cloud9"][original-article] (the
original source for the present article, inspired by this
[comment][original-comment])
- ["Making Webpacker run on Cloud 9"] (GitHub issue)
- ["Anyone here got webpack-dev-server to work on Cloud 9?"] (GitHub issue)
- [`webpacker` documentation]
- [`webpacker/dev_server.rb` code]
- [`webpack-dev-server` documentation]
- ["Using Rails With Webpack in Cloud 9"] (blog article)
[original-article]: http://rbf.io/en/blog/2017/11/18/webpack-dev-server-and-rails-on-cloud9/
[original-comment]: https://github.com/rails/webpacker/issues/176#issuecomment-345532309
["Making Webpacker run on Cloud 9"]: https://github.com/rails/webpacker/issues/176
["Anyone here got webpack-dev-server to work on Cloud 9?"]: https://github.com/webpack/webpack-dev-server/issues/230
[`webpacker` documentation]: https://github.com/rails/webpacker/tree/v3.0.2#development
[`webpacker/dev_server.rb` code]: https://github.com/rails/webpacker/blob/v3.0.2/lib/webpacker/dev_server.rb#L55
[`webpack-dev-server` documentation]: https://webpack.js.org/configuration/dev-server/
["Using Rails With Webpack in Cloud 9"]: http://aalvarez.me/blog/posts/using-rails-with-webpack-in-cloud-9.html
## Versions
Since things in this ecosystem move fast, it's important to mention the
versions of the world for which this documentation is relevant:
```shell
$ egrep '^ ?(ruby|webpacker|rails) ' Gemfile.lock
rails (5.1.4)
webpacker (3.0.2)
ruby 2.4.2p198
$ yarn versions
yarn versions v1.1.0
{ http_parser: '2.7.0',
node: '8.5.0',
v8: '6.0.287.53',
uv: '1.14.1',
zlib: '1.2.11',
ares: '1.10.1-DEV',
modules: '57',
nghttp2: '1.25.0',
openssl: '1.0.2l',
icu: '59.1',
unicode: '9.0',
cldr: '31.0.1',
tz: '2017b' }
$ cat /etc/os-release | head -6
NAME="Ubuntu"
VERSION="14.04.5 LTS, Trusty Tahr"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 14.04.5 LTS"
VERSION_ID="14.04"
```
Everything was tested using Chrome Version 62.
## tl;dr
1. Make sure that you are running the [proper binstub
version](#binstub-versions) of `./bin/webpack-dev-server`.
1. Change the `development.dev_server` entry `config/webpacker.yml` file into:
```yaml
dev_server:
https: true
host: localhost
port: 8082
public: your-workspace-name-yourusername.c9users.io:8082
hmr: false
inline: false
overlay: true
disable_host_check: true
use_local_ip: false
```
1. Now running as usual `./bin/webpack-dev-server` in one terminal and
`./bin/rails s -b $IP -p $PORT` in another should work as expected.
webpacker-5.4.3/docs/webpack.md 0000644 0000041 0000041 00000025447 14123265223 016420 0 ustar www-data www-data # 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:
```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',
}
}
}
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')
// Set nested object prop using path notation
environment.config.set('resolve.extensions', ['.foo', '.bar'])
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')
module.exports = environment
```
If you need access to configs within Webpacker's configuration,
you can import them like so:
```js
const { config } = require('@rails/webpacker')
console.log(config.output_path)
console.log(config.source_path)
```
## Loaders
You can add additional loaders beyond the base set that Webpacker provides by
adding it to your environment. We'll use `json-loader` as an example:
```
yarn add json-loader
```
```js
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
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)
// Insert json loader after/before a given loader
environment.loaders.insert('json', jsonLoader, { after: 'style'} )
environment.loaders.insert('json', jsonLoader, { before: 'babel'} )
module.exports = environment
```
Finally add `.json` to the list of extensions in `config/webpacker.yml`. Now if you `import()` any `.json` files inside your JavaScript
they will be processed using `json-loader`. Voila!
You can also modify the loaders that Webpacker pre-configures for you. We'll update
the `babel` loader as an example:
```js
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const babelLoader = environment.loaders.get('babel')
babelLoader.options.cacheDirectory = false
module.exports = environment
```
### Coffeescript 2
Out of the box webpacker supports coffeescript 1,
but here is how you can use Coffeescript 2:
```
yarn add coffeescript@2.0.1
```
```js
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const babelLoader = environment.loaders.get('babel')
// Replace existing coffee loader with CS2 version
environment.loaders.insert('coffee', {
test: /\.coffee(\.erb)?$/,
use: babelLoader.use.concat(['coffee-loader'])
})
module.exports = environment
```
### React SVG loader
To use react svg loader, you should append svg loader before file loader:
```js
const { environment } = require('@rails/webpacker')
const babelLoader = environment.loaders.get('babel')
environment.loaders.insert('svg', {
test: /\.svg$/,
use: babelLoader.use.concat([
{
loader: 'react-svg-loader',
options: {
jsx: true // true outputs JSX tags
}
}
])
}, { before: 'file' })
const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /\.(svg)$/i
```
### Url Loader
```js
// config/webpack/loaders/url.js
module.exports = {
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: '[name]-[hash].[ext]'
}
}]
}
// 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.)
In webpack 3+, if you'd like to specify additional or different options for a loader, edit `config/webpack/environment.js` and provide an options object to override. This is similar to the technique shown above, but the following example shows specifically how to apply CSS Modules, which is what you may be looking for:
```javascript
const { environment } = require('@rails/webpacker')
const merge = require('webpack-merge')
const myCssLoaderOptions = {
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
},
sourceMap: true,
}
const CSSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'css-loader')
CSSLoader.options = merge(CSSLoader.options, myCssLoaderOptions)
module.exports = environment
```
See [issue #756](https://github.com/rails/webpacker/issues/756#issuecomment-327148547) for additional discussion of this.
For this to work, don't forget to use the `stylesheet_pack_tag`, for example:
```
<%= stylesheet_pack_tag 'YOUR_PACK_NAME_HERE' %>
```
## Plugins
The process for adding or modifying webpack plugins is the same as the process
for loaders above:
```js
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
// Get a pre-configured plugin
const manifestPlugin = environment.plugins.get('Manifest')
manifestPlugin.options.writeToFileEmit = false
// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.Tether': 'tether',
Popper: ['popper.js', 'default'],
ActionCable: 'actioncable',
Vue: 'vue',
VueResource: 'vue-resource',
})
)
// Insert before a given plugin
environment.plugins.insert('CommonChunkVendor',
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', // Vendor code
minChunks: (module) => module.context && module.context.indexOf('node_modules') !== -1
})
, { before: 'manifest' })
module.exports = environment
```
## Resolved modules
To add new paths to `resolve.modules`, the API is same as loaders and plugins:
```js
const { environment } = require('@rails/webpacker')
// Resolved modules list API - prepend, append, insert
environment.resolvedModules.append('vendor', 'vendor')
```
### 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
// 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' %>
```
**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.
#### Preloading
Before preload or prefetch your assets, please read [https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content).
Webpack also provide it's own methods for preload or prefetch [https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c).
You can preload your assets with the `preload_pack_asset` helper if you have Rails >= 5.2.x.
```erb
<%= preload_pack_asset 'fonts/fa-regular-400.woff2' %>
```
**Warning:** You don't want to preload the css, you want to preload the fonts and images inside the css so that fonts, css, and images can all be downloaded in parallel instead of waiting for the browser to parse the css.
### 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.
Add the plugins in `config/webpack/environment.js`:
```js
const webpack = require('webpack')
environment.plugins.append(
'CommonsChunkVendor',
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: (module) => {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1
}
})
)
environment.plugins.append(
'CommonsChunkManifest',
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
})
)
```
Now, add these files to your `layouts/application.html.erb`:
```erb
<%# Head %>
<%= javascript_pack_tag "manifest" %>
<%= javascript_pack_tag "vendor" %>
<%# If importing any styles from node_modules in your JS app %>
<%= stylesheet_pack_tag "vendor" %>
```
More detailed guides available here: [webpack guides](https://webpack.js.org/guides/)
webpacker-5.4.3/docs/misc.md 0000644 0000041 0000041 00000000726 14123265223 015730 0 ustar www-data www-data # 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.
webpacker-5.4.3/docs/v4-upgrade.md 0000644 0000041 0000041 00000016007 14123265223 016752 0 ustar www-data www-data # 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 from [`.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' %>
```
**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: false })
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"
```
## Upgrading projects with custom Webpack setups that use only the view helpers
The default value for `extract_css` is **false** in `config/webpack.yml`. Custom webpack builds that extract the CSS such as often used with [React on Rails](https://github.com/shakacode/react_on_rails) should set this value to true or else no CSS link tags are generated.
```yml
default: &default
# other stuff
extract_css: true
# by default, extract and emit a css file. The default is false
```
## 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
webpacker-5.4.3/docs/integrations.md 0000644 0000041 0000041 00000015005 14123265223 017477 0 ustar www-data www-data # 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
...
```
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 -> Hello David
)
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
`. Please note that these environmental
variables will always take precedence over the ones already set in the
configuration file, and that the _same_ environmental variables must
be available to the `rails server` process.
```bash
WEBPACKER_DEV_SERVER_HOST=example.com WEBPACKER_DEV_SERVER_INLINE=true WEBPACKER_DEV_SERVER_HOT=false ./bin/webpack-dev-server
```
By default, the webpack dev server listens on `localhost` in development for security purposes.
However, if you want your app to be available over local LAN IP or a VM instance like vagrant,
you can set the `host` when running `./bin/webpack-dev-server` binstub:
```bash
WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server
```
**Note:** You need to allow webpack-dev-server host as an allowed origin for `connect-src` if you are running your application in a restrict CSP environment (like Rails 5.2+). This can be done in Rails 5.2+ in the CSP initializer `config/initializers/content_security_policy.rb` with a snippet like this:
```ruby
Rails.application.config.content_security_policy do |policy|
policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035' if Rails.env.development?
end
```
**Note:** Don't forget to prefix `ruby` when running these binstubs on Windows
### Webpack Configuration
See [docs/webpack](docs/webpack.md) for modifying webpack configuration and loaders.
### Custom Rails environments
Out of the box Webpacker ships with - development, test and production environments in `config/webpacker.yml` however, in most production apps extra environments are needed as part of deployment workflow. Webpacker supports this out of the box from version 3.4.0+ onwards.
You can choose to define additional environment configurations in webpacker.yml,
```yml
staging:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
# Compile staging packs to a separate directory
public_output_path: packs-staging
```
or, Webpacker will use production environment as a fallback environment for loading configurations. Please note, `NODE_ENV` can either be set to `production`, `development` or `test`.
This means you don't need to create additional environment files inside `config/webpacker/*` and instead use webpacker.yml to load different configurations using `RAILS_ENV`.
For example, the below command will compile assets in production mode but will use staging configurations from `config/webpacker.yml` if available or use fallback production environment configuration:
```bash
RAILS_ENV=staging bundle exec rails assets:precompile
```
And, this will compile in development mode and load configuration for cucumber environment
if defined in webpacker.yml or fallback to production configuration
```bash
RAILS_ENV=cucumber NODE_ENV=development bundle exec rails assets:precompile
```
Please note, binstubs compiles in development mode however rake tasks
compiles in production mode.
```bash
# Compiles in development mode unless NODE_ENV is specified
./bin/webpack
./bin/webpack-dev-server
# compiles in production mode by default unless NODE_ENV is specified
bundle exec rails assets:precompile
bundle exec rails webpacker:compile
```
### Upgrading
You can run following commands to upgrade Webpacker to the latest stable version. This process involves upgrading the gem and related JavaScript packages:
```bash
bundle update webpacker
rails webpacker:binstubs
yarn upgrade @rails/webpacker --latest
yarn upgrade webpack-dev-server --latest
# Or to install the latest release (including pre-releases)
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
app files and compiled webpack bundles will go in your Rails app.
All these options are configurable from `config/webpacker.yml` file.
The configuration for what webpack is supposed to compile by default rests
on the convention that every file in `app/javascript/packs/*`**(default)**
or whatever path you set for `source_entry_path` in the `webpacker.yml` configuration
is turned into their own output files (or entry points, as webpack calls it). Therefore you don't want to put anything inside `packs` directory that you do not want to be
an entry file. As a rule of thumb, put all files you want to link in your views inside
"packs" directory and keep everything else under `app/javascript`.
Suppose you want to change the source directory from `app/javascript`
to `frontend` and output to `assets/packs`. This is how you would do it:
```yml
# config/webpacker.yml
source_path: frontend
source_entry_path: packs
public_output_path: assets/packs # outputs to => public/assets/packs
```
Similarly you can also control and configure `webpack-dev-server` settings from `config/webpacker.yml` file:
```yml
# config/webpacker.yml
development:
dev_server:
host: localhost
port: 3035
```
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.
### 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
with webpack modules, you can use the `additional_paths`
option available in `config/webpacker.yml`. This lets you
add additional paths that webpack should lookup when resolving modules:
```yml
additional_paths: ['app/assets']
```
You can then import these items inside your modules like so:
```js
// Note it's relative to parent directory i.e. app/assets
import 'stylesheets/main'
import 'images/rails.png'
```
**Note:** Please be careful when adding paths here otherwise it
will make the compilation slow, consider adding specific paths instead of
whole parent directory if you just need to reference one or two modules
## Deployment
Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`. If you are not using Sprockets, `webpacker:compile` is automatically aliased to `assets:precompile`. Similar to sprockets both rake tasks will compile packs in production mode but will use `RAILS_ENV` to load configuration from `config/webpacker.yml` (if available).
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
[](https://www.codetriage.com/rails/webpacker)
We encourage you to contribute to Webpacker! See [CONTRIBUTING](CONTRIBUTING.md) for guidelines about how to proceed.
## License
Webpacker is released under the [MIT License](https://opensource.org/licenses/MIT).
webpacker-5.4.3/package.json 0000644 0000041 0000041 00000004661 14123265223 016013 0 ustar www-data www-data {
"name": "@rails/webpacker",
"version": "5.4.3",
"description": "Use webpack to manage app-like JavaScript modules in Rails",
"main": "package/index.js",
"files": [
"package",
"lib/install/config/webpacker.yml"
],
"engines": {
"node": ">=10.17.0",
"yarn": ">=1 <4"
},
"dependencies": {
"@babel/core": "^7.15.0",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-object-rest-spread": "^7.14.7",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-destructuring": "^7.14.7",
"@babel/plugin-transform-regenerator": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/runtime": "^7.15.3",
"babel-loader": "^8.2.2",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-plugin-macros": "^2.8.0",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"compression-webpack-plugin": "^4.0.1",
"core-js": "^3.16.2",
"css-loader": "^3.6.0",
"file-loader": "^6.2.0",
"flatted": "^3.2.2",
"glob": "^7.1.7",
"js-yaml": "^3.14.1",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.8",
"path-complete-extname": "^1.0.0",
"pnp-webpack-plugin": "^1.7.0",
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"postcss-safe-parser": "^4.0.2",
"regenerator-runtime": "^0.13.9",
"sass": "^1.38.0",
"sass-loader": "10.1.1",
"style-loader": "^1.3.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^4.46.0",
"webpack-assets-manifest": "^3.1.1",
"webpack-cli": "^3.3.12",
"webpack-sources": "^1.4.3"
},
"devDependencies": {
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"jest": "^27.0.6"
},
"jest": {
"testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",
"roots": [
"/package"
]
},
"scripts": {
"test": "jest",
"lint": "eslint package/"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rails/webpacker.git"
},
"author": "David Heinemeier Hansson ",
"license": "MIT",
"bugs": {
"url": "https://github.com/rails/webpacker/issues"
},
"homepage": "https://github.com/rails/webpacker"
}
webpacker-5.4.3/gemfiles/ 0000755 0000041 0000041 00000000000 14123265223 015311 5 ustar www-data www-data webpacker-5.4.3/gemfiles/Gemfile-rails.6.0.x 0000644 0000041 0000041 00000000255 14123265223 020466 0 ustar www-data www-data source "https://rubygems.org"
gemspec path: "../"
gem "rails", "~> 6.0.0.rc2"
gem "rake", ">= 11.1"
gem "rack-proxy", require: false
gem "minitest", "~> 5.0"
gem "byebug"
webpacker-5.4.3/gemfiles/Gemfile-rails.5.2.x 0000644 0000041 0000041 00000000251 14123265223 020463 0 ustar www-data www-data source "https://rubygems.org"
gemspec path: "../"
gem "rails", "~> 5.2.0"
gem "rake", ">= 11.1"
gem "rack-proxy", require: false
gem "minitest", "~> 5.0"
gem "byebug"
webpacker-5.4.3/gemfiles/Gemfile-rails-edge 0000644 0000041 0000041 00000000446 14123265223 020622 0 ustar www-data www-data source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
gemspec path: "../"
gem "rails", github: "rails/rails", branch: "main"
gem "arel", github: "rails/arel"
gem "rake", ">= 11.1"
gem "rack-proxy", require: false
gem "minitest", "~> 5.0"
gem "byebug"
webpacker-5.4.3/CHANGELOG.md 0000644 0000041 0000041 00000103543 14123265223 015335 0 ustar www-data www-data **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**
**Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above**
## [[5.4.2]](https://github.com/rails/webpacker/compare/v5.4.0...v5.4.1) - 2021-08-20
- Fix babel warning about private-methods in @babel/plugin-proposal-private-property-in-object as well.
## [[5.4.1]](https://github.com/rails/webpacker/compare/v5.4.0...v5.4.1) - 2021-08-20
- Update all dependencies within the same major version (#3120)
- Fix babel warning about private-methods (#3016)
## [[5.4.0]](https://github.com/rails/webpacker/compare/v5.3.0...v5.4.0) - 2021-05-18
- Fix compatibility with Psych 4
## [[5.3.0]](https://github.com/rails/webpacker/compare/v5.2.1...v5.3.0) - 2021-04-27
- Adds experimental Yarn 2 support. Note you must manually set `nodeLinker: node-modules` in your `.yarnrc.yml`.
- Keep backups, even when they're old [#2912](https://github.com/rails/webpacker/pull/2912)
## [[5.2.2]](https://github.com/rails/webpacker/compare/v5.2.1...v5.2.2) - 2021-04-27
- Bump deps and remove node-sass [#2997](https://github.com/rails/webpacker/pull/2997).
## [[5.2.1]](https://github.com/rails/webpacker/compare/v5.2.0...v5.2.1) - 2020-08-17
- Revert [#1311](https://github.com/rails/webpacker/pull/1311).
## [[5.2.0]](https://github.com/rails/webpacker/compare/v5.1.1...v5.2.0) - 2020-08-16
- Bump dependencies and fixes. See [diff](https://github.com/rails/webpacker/compare/v5.1.1...5-x-stable) for changes.
## [[5.1.1]](https://github.com/rails/webpacker/compare/v5.1.0...v5.1.1) - 2020-04-20
- Update [TypeScript documentation](https://github.com/rails/webpacker/blob/master/docs/typescript.md) and installer to use babel-loader for typescript.[(#2541](https://github.com/rails/webpacker/pull/2541)
## [[5.1.0]](https://github.com/rails/webpacker/compare/v5.0.1...v5.1.0) - 2020-04-19
- Remove yarn integrity check [#2518](https://github.com/rails/webpacker/pull/2518)
- Switch from ts-loader to babel-loader [#2449](https://github.com/rails/webpacker/pull/2449)
Please see the [TypeScript documentation](https://github.com/rails/webpacker/blob/master/docs/typescript.md) to upgrade existing projects to use typescript with 5.1
- Resolve multi-word snakecase WEBPACKER_DEV_SERVER env values [#2528](https://github.com/rails/webpacker/pull/2528)
## [[5.0.1]](https://github.com/rails/webpacker/compare/v5.0.0...v5.0.1) - 2020-03-22
- Upgrade deps and fix sass loader config options bug [#2508](https://github.com/rails/webpacker/pull/2508)
## [[5.0.0]](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0) - 2020-03-22
- Bump minimum node version [#2428](https://github.com/rails/webpacker/pull/2428)
- Bump minimum ruby/rails version [#2415](https://github.com/rails/webpacker/pull/2415)
- Add support for multiple files per entry [#2476](https://github.com/rails/webpacker/pull/2476)
```js
entry: {
home: ['./home.js', './home.scss'],
account: ['./account.js', './account.scss']
}
```
You can now have two entry files with same names inside packs folder, `home.scss` and `home.js`
And, other minor fixes, please see a list of changes [here](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0)
## [[4.2.2]](https://github.com/rails/webpacker/compare/v4.2.1...v4.2.2) - 2019-12-09
- Fixed issue with webpack clean task for nested assets [#2391](https://github.com/rails/webpacker/pull/2391)
## [[4.2.1]](https://github.com/rails/webpacker/compare/v4.2.0...v4.2.1) - 2019-12-09
- Fixed issue with webpack clean task [#2389](https://github.com/rails/webpacker/pull/2389)
## [[4.2.0]](https://github.com/rails/webpacker/compare/v4.1.0...v4.2.0) - 2019-11-12
- Fixed installer bug [#2366](https://github.com/rails/webpacker/pull/2366)
## [[4.1.0]](https://github.com/rails/webpacker/compare/v4.0.7...v4.1.0) - 2019-11-12
- Added favicon_pack_tag to generate favicon links [#2281](https://github.com/rails/webpacker/pull/2281)
- Add support for Brotli compression [#2273](https://github.com/rails/webpacker/pull/2273)
- Support .(sass|scss).erb [#2259](https://github.com/rails/webpacker/pull/2259)
- Elm: Enable production optimizations when compiling in production [#2234](https://github.com/rails/webpacker/pull/2234)
- fixes webpacker:clean erroring because of nested hashes [#2318](https://github.com/rails/webpacker/pull/2318)
- Revert of production env enforcement [#2341](https://github.com/rails/webpacker/pull/2341)
- Add a preload_pack_asset helper [#2124](https://github.com/rails/webpacker/pull/2124)
- Record the compilation digest even on webpack error [#2117](https://github.com/rails/webpacker/pull/2117)
- See more changes [here](https://github.com/rails/webpacker/compare/v4.0.7...v4.1.0)
## [[4.0.7]](https://github.com/rails/webpacker/compare/v4.0.6...v4.0.7) - 2019-06-03
- Prevent `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. Remove unneeded runtime `@babel/runtime-corejs3` [#2116](https://github.com/rails/webpacker/pull/2116)
- Fix for: [#2109 Uncaught TypeError: **webpack_require**(...) is not a function](https://github.com/rails/webpacker/issues/2109): **If you are upgrading**, please check your `babel.config.js` against the [default `babel.config.js`](https://github.com/rails/webpacker/blob/master/lib/install/config/babel.config.js):
- `@babel/preset-env` should contain `corejs: 3`
- `@babel/plugin-transform-runtime` should contain `corejs: false`
- Removed unneeded runtime `@babel/runtime-corejs3`
## [[4.0.6]](https://github.com/rails/webpacker/compare/v4.0.5...v4.0.6) - 2019-05-30
- Webpack should not be transpiled [#2111](https://github.com/rails/webpacker/pull/2111)
## [[4.0.5]](https://github.com/rails/webpacker/compare/v4.0.4...v4.0.5) - 2019-05-30
- Don't let babel & core-js transpile each other [#2110](https://github.com/rails/webpacker/pull/2110)
## [[4.0.4]](https://github.com/rails/webpacker/compare/v4.0.3...v4.0.4) - 2019-05-28
- Remove bundler version constraint
## [[4.0.3]](https://github.com/rails/webpacker/compare/v4.0.2...v4.0.3) - 2019-05-28
Please see the diff
##### Breaking changes (for pre-existing apps)
- [`@babel/polyfill`](https://babeljs.io/docs/en/next/babel-polyfill.html) [doesn't make it possible to provide a smooth migration path from `core-js@2` to `core-js@3`](https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill): for this reason, it was decided to deprecate `@babel/polyfill` in favor of separate inclusion of required parts of `core-js` and `regenerator-runtime`. [#2031](https://github.com/rails/webpacker/pull/2031)
In each of your `/packs/*.js` files, change this:
```js
import '@babel/polyfill'
```
to this:
```js
import 'core-js/stable'
import 'regenerator-runtime/runtime'
```
Don't forget to install those dependencies directly!
```sh
yarn add core-js regenerator-runtime
```
## [4.0.2] - 2019-03-06
- Bump the version on npm
## [4.0.1] - 2019-03-04
### Fixed
- Pre-release version installer
## [4.0.0] - 2019-03-04
No changes in this release. See RC releases for changes.
## [4.0.0.rc.8] - 2019-03-03
### Fixed
- Re-enable source maps 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.
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()
```
- Reintroduced `context` to the file loader. Reverting the simpler paths change
- Updated file loader to have filename based on the path. This change
keeps the old behaviour intact i.e. let people use namespaces for media
inside `app/javascript` and also include media outside of `app/javascript`
with simpler paths, for example from `node_modules` or `app/assets`
```bash
# Files inside app/javascript (i.e. packs source path)
# media/[full_path_relative_to_app_javascript]/name_of_the_asset_with_digest
media/images/google-97e897b3851e415bec4fd30c265eb3ce.jpg
media/images/rails-45b116b1f66cc5e6f9724e8f9a2db73d.png
media/images/some_namespace/google-97e897b3851e415bec4fd30c265eb3ce.jpg
# Files outside app/javascript (i.e. packs source path)
# media/[containing_folder_name]/name_of_the_asset_with_digest
media/some_assets/rails_assets-f0f7bbb5.png
media/webfonts/fa-brands-400-4b115e11.woff2
```
This change is done so we don't end up paths like `media/_/assets/images/rails_assets-f0f7bbb5ef00110a0dcef7c2cb7d34a6.png` or `media/_/_/node_modules/foo-f0f7bbb5ef00110a0dcef7c2cb7d34a6.png` for media outside of
`app/javascript`
## [4.0.0.rc.7] - 2019-01-25
### Fixed
- Webpacker builds test app assets [#1908](https://github.com/rails/webpacker/issues/1908)
## [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"
```
To get old behaviour:
```js
// config/webpack/environment.js
const { environment, config } = require('@rails/webpacker')
const { join } = require('path')
const fileLoader = environment.loaders.get('file')
fileLoader.use[0].options.name = '[path][name]-[hash].[ext]'
fileLoader.use[0].options.context = join(config.source_path) // optional if you don't want to expose full paths
```
### 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
- Gems and node dependencies
## [4.0.0.rc.4] - 2019-01-21
### Added
- `stylesheet_packs_with_chunks_tag` helper, similar to javascript helper but for
loading stylesheets chunks.
```erb
<%= stylesheet_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
--webpack=elm`
- Within an existing app: `rails webpacker:install:elm`
- Support for custom `public_output_path` paths independent of `source_entry_path` in `config/webpacker.yml`. `output` is also now relative to `public/`. - [#397](https://github.com/rails/webpacker/pull/397)
Before (compile to `public/packs`):
```yaml
source_entry_path: packs
public_output_path: packs
```
After (compile to `public/sweet/js`):
```yaml
source_entry_path: packs
public_output_path: sweet/js
```
- `https` option to use `https` mode, particularly on platforms like - https://community.c9.io/t/running-a-rails-app/1615 or locally - [#176](https://github.com/rails/webpacker/issues/176)
- [Babel] Dynamic import() and Class Fields and Static Properties babel plugin to `.babelrc`
```json
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": "> 1%",
"uglify": true
},
"useBuiltIns": true
}
]
],
"plugins": [
"syntax-dynamic-import",
"transform-class-properties",
{ "spec": true }
]
}
```
- Source-map support for production bundle
#### Breaking Change
- Consolidate and flatten `paths.yml` and `development.server.yml` config into one file - `config/webpacker.yml` - [#403](https://github.com/rails/webpacker/pull/403). This is a breaking change and requires you to re-install webpacker and cleanup old configuration files.
```bash
bundle update webpacker
bundle exec rails webpacker:install
# Remove old/unused configuration files
rm config/webpack/paths.yml
rm config/webpack/development.server.yml
rm config/webpack/development.server.js
```
**Warning**: For now you also have to add a pattern in `.gitignore` by hand.
```diff
/public/packs
+/public/packs-test
/node_modules
```
## [1.2] - 2017-04-27
Some of the changes made requires you to run below commands to install new changes.
```
bundle update webpacker
bundle exec rails webpacker:install
```
### Fixed
- Support Spring - [#205](https://github.com/rails/webpacker/issues/205)
```ruby
Spring.after_fork { Webpacker.bootstrap } if defined?(Spring)
```
- Check node version and yarn before installing webpacker - [#217](https://github.com/rails/webpacker/issues/217)
- Include webpacker helper to views - [#172](https://github.com/rails/webpacker/issues/172)
- Webpacker installer on windows - [#245](https://github.com/rails/webpacker/issues/245)
- Yarn duplication - [#278](https://github.com/rails/webpacker/issues/278)
- Add back Spring for `rails-erb-loader` - [#216](https://github.com/rails/webpacker/issues/216)
- Move babel presets and plugins to .babelrc - [#202](https://github.com/rails/webpacker/issues/202)
### Added
- A changelog - [#211](https://github.com/rails/webpacker/issues/211)
- Minimize CSS assets - [#218](https://github.com/rails/webpacker/issues/218)
- Pack namespacing support - [#201](https://github.com/rails/webpacker/pull/201)
For example:
```
app/javascript/packs/admin/hello_vue.js
app/javascript/packs/admin/hello.vue
app/javascript/packs/hello_vue.js
app/javascript/packs/hello.vue
```
- Add tree-shaking support - [#250](https://github.com/rails/webpacker/pull/250)
- Add initial test case by @kimquy [#259](https://github.com/rails/webpacker/pull/259)
- Compile assets before test:controllers and test:system
### Removed
- Webpack watcher - [#295](https://github.com/rails/webpacker/pull/295)
## [1.1] - 2017-03-24
This release requires you to run below commands to install new features.
```
bundle update webpacker
bundle exec rails webpacker:install
# if installed react, vue or angular
bundle exec rails webpacker:install:[react, angular, vue]
```
### Added (breaking changes)
- Static assets support - [#153](https://github.com/rails/webpacker/pull/153)
- Advanced webpack configuration - [#153](https://github.com/rails/webpacker/pull/153)
### Removed
```rb
config.x.webpacker[:digesting] = true
```
webpacker-5.4.3/.rubocop.yml 0000644 0000041 0000041 00000013331 14123265223 015771 0 ustar www-data www-data require: rubocop-performance
AllCops:
TargetRubyVersion: 2.4
# RuboCop has a bunch of cops enabled by default. This setting tells RuboCop
# to ignore them, so only the ones explicitly set in this file are enabled.
DisabledByDefault: true
Exclude:
- 'lib/install/templates/**'
- 'vendor/**/*'
- 'node_modules/**/*'
# Prefer &&/|| over and/or.
Style/AndOr:
Enabled: true
# Align `when` with `case`.
Layout/CaseIndentation:
Enabled: true
# Align comments with method definitions.
Layout/CommentIndentation:
Enabled: true
# No extra empty lines.
Layout/EmptyLines:
Enabled: true
# In a regular class definition, no empty lines around the body.
Layout/EmptyLinesAroundClassBody:
Enabled: true
# In a regular method definition, no empty lines around the body.
Layout/EmptyLinesAroundMethodBody:
Enabled: true
# In a regular module definition, no empty lines around the body.
Layout/EmptyLinesAroundModuleBody:
Enabled: true
# Use Ruby >= 1.9 syntax for hashes. Prefer { a: :b } over { :a => :b }.
Style/HashSyntax:
Enabled: true
# Method definitions after `private` or `protected` isolated calls need one
# extra level of indentation.
Layout/IndentationConsistency:
Enabled: true
EnforcedStyle: indented_internal_methods
# Detect hard tabs, no hard tabs.
Layout/IndentationStyle:
Enabled: true
# Two spaces, no tabs (for indentation).
Layout/IndentationWidth:
Enabled: true
Layout/SpaceAfterColon:
Enabled: true
Layout/SpaceAfterComma:
Enabled: true
Layout/SpaceAroundEqualsInParameterDefault:
Enabled: true
Layout/SpaceAroundKeyword:
Enabled: true
Layout/SpaceAroundOperators:
Enabled: true
Layout/SpaceBeforeFirstArg:
Enabled: true
# Defining a method with parameters needs parentheses.
Style/MethodDefParentheses:
Enabled: true
# Use `foo {}` not `foo{}`.
Layout/SpaceBeforeBlockBraces:
Enabled: true
# Use `foo { bar }` not `foo {bar}`.
Layout/SpaceInsideBlockBraces:
Enabled: true
# Use `{ a: 1 }` not `{a:1}`.
Layout/SpaceInsideHashLiteralBraces:
Enabled: true
Layout/SpaceInsideParens:
Enabled: true
# Check quotes usage according to lint rule below.
Style/StringLiterals:
Enabled: true
EnforcedStyle: double_quotes
# Blank lines should not have any spaces.
Layout/TrailingEmptyLines:
Enabled: true
# No trailing whitespace.
Layout/TrailingWhitespace:
Enabled: true
# Use quotes for string literals when they are enough.
Style/RedundantPercentQ:
Enabled: true
# Align `end` with the matching keyword or starting expression except for
# assignments, where it should be aligned with the LHS.
Layout/EndAlignment:
Enabled: true
EnforcedStyleAlignWith: variable
# Use my_method(my_arg) not my_method( my_arg ) or my_method my_arg.
Lint/RequireParentheses:
Enabled: true
# Use `bind_call(obj, args, ...)` instead of `bind(obj).call(args, ...)`.
Performance/BindCall:
Enabled: true
# Use `caller(n..n)` instead of `caller`.
Performance/Caller:
Enabled: true
# Use `casecmp` for case comparison.
Performance/Casecmp:
Enabled: true
# Extract Array and Hash literals outside of loops into local variables or constants.
Performance/CollectionLiteralInLoop:
Enabled: true
# Prefer `sort_by(&:foo)` instead of `sort { |a, b| a.foo <=> b.foo }`.
Performance/CompareWithBlock:
Enabled: true
# Use `count` instead of `{select,find_all,filter,reject}...{size,count,length}`.
Performance/Count:
Enabled: true
# Use `delete_prefix` instead of `gsub`.
Performance/DeletePrefix:
Enabled: true
# Use `delete_suffix` instead of `gsub`.
Performance/DeleteSuffix:
Enabled: true
# Use `detect` instead of `select.first`, `find_all.first`, `filter.first`, `select.last`, `find_all.last`, and `filter.last`.
Performance/Detect:
Enabled: true
# Use `str.{start,end}_with?(x, ..., y, ...)` instead of `str.{start,end}_with?(x, ...) || str.{start,end}_with?(y, ...)`.
Performance/DoubleStartEndWith:
Enabled: true
# Use `end_with?` instead of a regex match anchored to the end of a string.
Performance/EndWith:
Enabled: true
# Do not compute the size of statically sized objects except in constants.
Performance/FixedSize:
Enabled: true
# Use `Enumerable#flat_map` instead of `Enumerable#map...Array#flatten(1).
Performance/FlatMap:
Enabled: true
# Use `key?` or `value?` instead of `keys.include?` or `values.include?`.
Performance/InefficientHashSearch:
Enabled: true
# Use `Range#cover?` instead of `Range#include?` (or `Range#member?`).
Performance/RangeInclude:
Enabled: true
# Use `yield` instead of `block.call`.
Performance/RedundantBlockCall:
Enabled: true
# Use `=~` instead of `String#match` or `Regexp#match` in a context where the returned `MatchData` is not needed.
Performance/RedundantMatch:
Enabled: true
# Use Hash#[]=, rather than Hash#merge! with a single key-value pair.
Performance/RedundantMerge:
Enabled: true
# Use `match?` instead of `Regexp#match`, `String#match`, `Symbol#match`, `Regexp#===`, or `=~` when `MatchData` is not used.
Performance/RegexpMatch:
Enabled: true
# Use `reverse_each` instead of `reverse.each`.
Performance/ReverseEach:
Enabled: true
# Use `size` instead of `count` for counting the number of elements in `Array` and `Hash`.
Performance/Size:
Enabled: true
# Use `start_with?` instead of a regex match anchored to the beginning of a string.
Performance/StartWith:
Enabled: true
# Use `tr` instead of `gsub` when you are replacing the same number of characters.
# Use `delete` instead of `gsub` when you are deleting characters.
Performance/StringReplacement:
Enabled: true
# Checks for .times.map calls.
Performance/TimesMap:
Enabled: true
# Use unary plus to get an unfrozen string literal.
Performance/UnfreezeString:
Enabled: true
# Use `URI::DEFAULT_PARSER` instead of `URI::Parser.new`.
Performance/UriDefaultParser:
Enabled: true
webpacker-5.4.3/.gitignore 0000644 0000041 0000041 00000000226 14123265223 015506 0 ustar www-data www-data /.bundle
/pkg
/test/test_app/log
node_modules
.byebug_history
/test/test_app/tmp
yarn-debug.log*
yarn-error.log*
.yarn-integrity
/log
gemfiles/*.lock
webpacker-5.4.3/.node-version 0000644 0000041 0000041 00000000010 14123265223 016116 0 ustar www-data www-data 10.17.0
webpacker-5.4.3/webpacker.gemspec 0000644 0000041 0000041 00000002203 14123265223 017023 0 ustar www-data www-data $:.push File.expand_path("../lib", __FILE__)
require "webpacker/version"
Gem::Specification.new do |s|
s.name = "webpacker"
s.version = Webpacker::VERSION
s.authors = [ "David Heinemeier Hansson", "Gaurav Tiwari" ]
s.email = [ "david@basecamp.com", "gaurav@gauravtiwari.co.uk" ]
s.summary = "Use webpack to manage app-like JavaScript modules in Rails"
s.homepage = "https://github.com/rails/webpacker"
s.license = "MIT"
s.metadata = {
"source_code_uri" => "https://github.com/rails/webpacker/tree/v#{Webpacker::VERSION}",
"changelog_uri" => "https://github.com/rails/webpacker/blob/v#{Webpacker::VERSION}/CHANGELOG.md"
}
s.required_ruby_version = ">= 2.4.0"
s.add_dependency "activesupport", ">= 5.2"
s.add_dependency "railties", ">= 5.2"
s.add_dependency "rack-proxy", ">= 0.6.1"
s.add_dependency "semantic_range", ">= 2.3.0"
s.add_development_dependency "bundler", ">= 1.3.0"
s.add_development_dependency "rubocop", "0.93.1"
s.add_development_dependency "rubocop-performance"
s.files = `git ls-files`.split("\n")
s.test_files = `git ls-files -- test/*`.split("\n")
end
webpacker-5.4.3/.eslintrc.js 0000644 0000041 0000041 00000000441 14123265223 015754 0 ustar www-data www-data module.exports = {
extends: 'airbnb',
rules: {
'comma-dangle': ['error', 'never'],
'import/no-unresolved': 'off',
'import/no-extraneous-dependencies': 'off',
'import/extensions': 'off',
semi: ['error', 'never']
},
env: {
browser: true,
node: true
}
}
webpacker-5.4.3/Rakefile 0000644 0000041 0000041 00000000333 14123265223 015162 0 ustar www-data www-data # frozen_string_literal: true
require "bundler/gem_tasks"
require "rake/testtask"
Rake::TestTask.new do |t|
t.libs << "test"
t.test_files = FileList["test/**/*_test.rb"]
t.verbose = true
end
task default: :test
webpacker-5.4.3/lib/ 0000755 0000041 0000041 00000000000 14123265223 014264 5 ustar www-data www-data webpacker-5.4.3/lib/tasks/ 0000755 0000041 0000041 00000000000 14123265223 015411 5 ustar www-data www-data webpacker-5.4.3/lib/tasks/webpacker.rake 0000644 0000041 0000041 00000003642 14123265223 020225 0 ustar www-data www-data tasks = {
"webpacker:info" => "Provides information on Webpacker's environment",
"webpacker:install" => "Installs and setup webpack with Yarn",
"webpacker:compile" => "Compiles webpack bundles based on environment",
"webpacker:clean" => "Remove old compiled webpacks",
"webpacker:clobber" => "Removes the webpack compiled output directory",
"webpacker:check_node" => "Verifies if Node.js is installed",
"webpacker:check_yarn" => "Verifies if Yarn is installed",
"webpacker:check_binstubs" => "Verifies that webpack & webpack-dev-server are present",
"webpacker:binstubs" => "Installs Webpacker binstubs in this application",
"webpacker:verify_install" => "Verifies if Webpacker is installed",
"webpacker:yarn_install" => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn",
"webpacker:install:react" => "Installs and setup example React component",
"webpacker:install:vue" => "Installs and setup example Vue component",
"webpacker:install:angular" => "Installs and setup example Angular component",
"webpacker:install:elm" => "Installs and setup example Elm component",
"webpacker:install:svelte" => "Installs and setup example Svelte component",
"webpacker:install:stimulus" => "Installs and setup example Stimulus component",
"webpacker:install:erb" => "Installs Erb loader with an example",
"webpacker:install:coffee" => "Installs CoffeeScript loader with an example",
"webpacker:install:typescript" => "Installs Typescript loader with an example"
}.freeze
desc "Lists all available tasks in Webpacker"
task :webpacker do
puts "Available Webpacker tasks are:"
tasks.each { |task, message| puts task.ljust(30) + message }
end
webpacker-5.4.3/lib/tasks/installers.rake 0000644 0000041 0000041 00000002122 14123265223 020432 0 ustar www-data www-data installers = {
"Angular": :angular,
"Elm": :elm,
"React": :react,
"Vue": :vue,
"Erb": :erb,
"Coffee": :coffee,
"Typescript": :typescript,
"Svelte": :svelte,
"Stimulus": :stimulus
}.freeze
dependencies = {
"Angular": [:typescript]
}
bin_path = ENV["BUNDLE_BIN"] || "./bin"
namespace :webpacker do
namespace :install do
installers.each do |name, task_name|
desc "Install everything needed for #{name}"
task task_name => ["webpacker:verify_install"] do
template = File.expand_path("../install/#{task_name}.rb", __dir__)
base_path =
if Rails::VERSION::MAJOR >= 5
"#{RbConfig.ruby} #{bin_path}/rails app:template"
else
"#{RbConfig.ruby} #{bin_path}/rake rails:template"
end
dependencies[name] ||= []
dependencies[name].each do |dependency|
dependency_template = File.expand_path("../install/#{dependency}.rb", __dir__)
system "#{base_path} LOCATION=#{dependency_template}"
end
exec "#{base_path} LOCATION=#{template}"
end
end
end
end
webpacker-5.4.3/lib/tasks/webpacker/ 0000755 0000041 0000041 00000000000 14123265223 017354 5 ustar www-data www-data webpacker-5.4.3/lib/tasks/webpacker/compile.rake 0000644 0000041 0000041 00000002360 14123265223 021651 0 ustar www-data www-data $stdout.sync = true
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? ? [] : ["webpacker:yarn_install"]
Rake::Task["assets:precompile"].enhance(deps) do
Rake::Task["webpacker:compile"].invoke
end
end
namespace :webpacker do
desc "Compile JavaScript packs using webpack for production with digests"
task compile: ["webpacker:verify_install", :environment] do
Webpacker.with_node_env(ENV.fetch("NODE_ENV", "production")) do
Webpacker.ensure_log_goes_to_stdout do
if Webpacker.compile
# Successful compilation!
else
# Failed compilation
exit!
end
end
end
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" => ["webpacker:yarn_install", "webpacker:compile"])
end
end
webpacker-5.4.3/lib/tasks/webpacker/check_yarn.rake 0000644 0000041 0000041 00000002306 14123265223 022327 0 ustar www-data www-data require "semantic_range"
namespace :webpacker do
desc "Verifies if Yarn is installed"
task :check_yarn do
begin
yarn_version = `yarn --version`.strip
raise Errno::ENOENT if yarn_version.blank?
pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
yarn_range = JSON.parse(pkg_path.read)["engines"]["yarn"]
is_valid = SemanticRange.satisfies?(yarn_version, yarn_range) rescue false
is_unsupported = SemanticRange.satisfies?(yarn_version, ">=4.0.0") rescue false
unless is_valid
$stderr.puts "Webpacker requires Yarn \"#{yarn_range}\" and you are using #{yarn_version}"
if is_unsupported
$stderr.puts "This version of Webpacker does not support Yarn #{yarn_version}. Please downgrade to a supported version of Yarn https://yarnpkg.com/lang/en/docs/install/"
else
$stderr.puts "Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/"
end
$stderr.puts "Exiting!"
exit!
end
rescue Errno::ENOENT
$stderr.puts "Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/"
$stderr.puts "Exiting!"
exit!
end
end
end
webpacker-5.4.3/lib/tasks/webpacker/clobber.rake 0000644 0000041 0000041 00000001147 14123265223 021633 0 ustar www-data www-data require "webpacker/configuration"
namespace :webpacker do
desc "Remove the webpack compiled output directory"
task clobber: ["webpacker:verify_install", :environment] do
Webpacker.clobber
$stdout.puts "Removed webpack output path directory #{Webpacker.config.public_output_path}"
end
end
skip_webpacker_clobber = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
unless skip_webpacker_clobber
# Run clobber if the assets:clobber is run
if Rake::Task.task_defined?("assets:clobber")
Rake::Task["assets:clobber"].enhance do
Rake::Task["webpacker:clobber"].invoke
end
end
end
webpacker-5.4.3/lib/tasks/webpacker/clean.rake 0000644 0000041 0000041 00000001306 14123265223 021302 0 ustar www-data www-data $stdout.sync = true
require "webpacker/configuration"
namespace :webpacker do
desc "Remove old compiled webpacks"
task :clean, [:keep, :age] => ["webpacker:verify_install", :environment] do |_, args|
Webpacker.ensure_log_goes_to_stdout do
Webpacker.clean(Integer(args.keep || 2), Integer(args.age || 3600))
end
end
end
skip_webpacker_clean = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
unless skip_webpacker_clean
# Run clean if the assets:clean is run
if Rake::Task.task_defined?("assets:clean")
Rake::Task["assets:clean"].enhance do
Rake::Task["webpacker:clean"].invoke
end
else
Rake::Task.define_task("assets:clean" => "webpacker:clean")
end
end
webpacker-5.4.3/lib/tasks/webpacker/info.rake 0000644 0000041 0000041 00000001276 14123265223 021161 0 ustar www-data www-data require "webpacker/version"
namespace :webpacker do
desc "Provide information on Webpacker's environment"
task :info do
$stdout.puts "Ruby: #{`ruby --version`}"
$stdout.puts "Rails: #{Rails.version}"
$stdout.puts "Webpacker: #{Webpacker::VERSION}"
$stdout.puts "Node: #{`node --version`}"
$stdout.puts "Yarn: #{`yarn --version`}"
$stdout.puts "\n"
$stdout.puts "@rails/webpacker: \n#{`npm list @rails/webpacker version`}"
$stdout.puts "Is bin/webpack present?: #{File.exist? 'bin/webpack'}"
$stdout.puts "Is bin/webpack-dev-server present?: #{File.exist? 'bin/webpack-dev-server'}"
$stdout.puts "Is bin/yarn present?: #{File.exist? 'bin/yarn'}"
end
end
webpacker-5.4.3/lib/tasks/webpacker/binstubs.rake 0000644 0000041 0000041 00000000776 14123265223 022063 0 ustar www-data www-data binstubs_template_path = File.expand_path("../../install/binstubs.rb", __dir__).freeze
bin_path = ENV["BUNDLE_BIN"] || "./bin"
namespace :webpacker do
desc "Installs Webpacker binstubs in this application"
task binstubs: [:check_node, :check_yarn] do
if Rails::VERSION::MAJOR >= 5
exec "#{RbConfig.ruby} #{bin_path}/rails app:template LOCATION=#{binstubs_template_path}"
else
exec "#{RbConfig.ruby} #{bin_path}/rake rails:template LOCATION=#{binstubs_template_path}"
end
end
end
webpacker-5.4.3/lib/tasks/webpacker/check_node.rake 0000644 0000041 0000041 00000002412 14123265223 022301 0 ustar www-data www-data require "semantic_range"
namespace :webpacker do
desc "Verifies if Node.js is installed"
task :check_node do
begin
node_version = `node -v || nodejs -v`.strip
raise Errno::ENOENT if node_version.blank?
pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
node_range = JSON.parse(pkg_path.read)["engines"]["node"]
is_valid = SemanticRange.satisfies?(node_version, node_range) rescue false
semver_major = node_version[/\d+/] rescue nil
is_unstable = semver_major.to_i.odd? rescue false
if is_unstable
$stderr.puts "Warning: you are using an unstable release of Node.js (#{node_version}). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node"
end
unless is_valid
$stderr.puts "Webpacker requires Node.js \"#{node_range}\" and you are using #{node_version}"
$stderr.puts "Please upgrade Node.js https://nodejs.org/en/download/"
$stderr.puts "Exiting!"
exit!
end
rescue Errno::ENOENT
$stderr.puts "Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/"
$stderr.puts "Exiting!"
exit!
end
end
end
webpacker-5.4.3/lib/tasks/webpacker/check_binstubs.rake 0000644 0000041 0000041 00000000617 14123265223 023212 0 ustar www-data www-data namespace :webpacker do
desc "Verifies that webpack & webpack-dev-server are present."
task :check_binstubs do
unless File.exist?("bin/webpack")
$stderr.puts "webpack binstubs not found.\n"\
"Have you run rails webpacker:install ?\n"\
"Make sure the bin directory or binstubs are not included in .gitignore\n"\
"Exiting!"
exit!
end
end
end
webpacker-5.4.3/lib/tasks/webpacker/verify_install.rake 0000644 0000041 0000041 00000000662 14123265223 023256 0 ustar www-data www-data require "webpacker/configuration"
namespace :webpacker do
desc "Verifies if Webpacker is installed"
task verify_install: [:check_node, :check_yarn, :check_binstubs] do
unless Webpacker.config.config_path.exist?
$stderr.puts "Configuration config/webpacker.yml file not found. \n"\
"Make sure webpacker:install is run successfully before " \
"running dependent tasks"
exit!
end
end
end
webpacker-5.4.3/lib/tasks/webpacker/install.rake 0000644 0000041 0000041 00000000760 14123265223 021671 0 ustar www-data www-data install_template_path = File.expand_path("../../install/template.rb", __dir__).freeze
bin_path = ENV["BUNDLE_BIN"] || "./bin"
namespace :webpacker do
desc "Install Webpacker in this application"
task install: [:check_node, :check_yarn] do
if Rails::VERSION::MAJOR >= 5
exec "#{RbConfig.ruby} #{bin_path}/rails app:template LOCATION=#{install_template_path}"
else
exec "#{RbConfig.ruby} #{bin_path}/rake rails:template LOCATION=#{install_template_path}"
end
end
end
webpacker-5.4.3/lib/tasks/webpacker/yarn_install.rake 0000644 0000041 0000041 00000001040 14123265223 022712 0 ustar www-data www-data namespace :webpacker do
desc "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn"
task :yarn_install do
valid_node_envs = %w[test development production]
node_env = ENV.fetch("NODE_ENV") do
valid_node_envs.include?(Rails.env) ? Rails.env : "production"
end
yarn_flags =
if `yarn --version`.start_with?("1")
"--no-progress --frozen-lockfile"
else
"--immutable"
end
system({ "NODE_ENV" => node_env }, "yarn install #{yarn_flags}")
end
end
webpacker-5.4.3/lib/webpacker.rb 0000644 0000041 0000041 00000002130 14123265223 016550 0 ustar www-data www-data require "active_support/core_ext/module/attribute_accessors"
require "active_support/core_ext/string/inquiry"
require "active_support/logger"
require "active_support/tagged_logging"
module Webpacker
extend self
def instance=(instance)
@instance = instance
end
def instance
@instance ||= Webpacker::Instance.new
end
def with_node_env(env)
original = ENV["NODE_ENV"]
ENV["NODE_ENV"] = env
yield
ensure
ENV["NODE_ENV"] = original
end
def ensure_log_goes_to_stdout
old_logger = Webpacker.logger
Webpacker.logger = ActiveSupport::Logger.new(STDOUT)
yield
ensure
Webpacker.logger = old_logger
end
delegate :logger, :logger=, :env, to: :instance
delegate :config, :compiler, :manifest, :commands, :dev_server, to: :instance
delegate :bootstrap, :clean, :clobber, :compile, to: :commands
end
require "webpacker/instance"
require "webpacker/env"
require "webpacker/configuration"
require "webpacker/manifest"
require "webpacker/compiler"
require "webpacker/commands"
require "webpacker/dev_server"
require "webpacker/railtie" if defined?(Rails)
webpacker-5.4.3/lib/install/ 0000755 0000041 0000041 00000000000 14123265223 015732 5 ustar www-data www-data webpacker-5.4.3/lib/install/svelte.rb 0000644 0000041 0000041 00000002311 14123265223 017556 0 ustar www-data www-data require "webpacker/configuration"
say "Copying svelte loader to config/webpack/loaders"
copy_file "#{__dir__}/loaders/svelte.js", Rails.root.join("config/webpack/loaders/svelte.js").to_s
say "Adding svelte loader to config/webpack/environment.js"
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"const svelte = require('./loaders/svelte')\n",
after: /require\(('|")@rails\/webpacker\1\);?\n/
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"environment.loaders.prepend('svelte', svelte)\n",
before: "module.exports"
say "Copying Svelte example entry file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/svelte/hello_svelte.js",
"#{Webpacker.config.source_entry_path}/hello_svelte.js"
say "Copying Svelte app file to #{Webpacker.config.source_path}"
copy_file "#{__dir__}/examples/svelte/app.svelte",
"#{Webpacker.config.source_path}/app.svelte"
say "Installing all Svelte dependencies"
run "yarn add svelte svelte-loader"
say "Updating webpack paths to include .svelte file extension"
insert_into_file Webpacker.config.config_path, "- .svelte\n".indent(4), after: /\s+extensions:\n/
say "Webpacker now supports Svelte 🎉", :green
webpacker-5.4.3/lib/install/stimulus.rb 0000644 0000041 0000041 00000000760 14123265223 020147 0 ustar www-data www-data say "Appending Stimulus setup code to #{Webpacker.config.source_entry_path}/application.js"
append_to_file "#{Webpacker.config.source_entry_path}/application.js" do
"\n" + open("#{__dir__}/examples/stimulus/application.js").read
end
say "Creating controllers directory"
directory "#{__dir__}/examples/stimulus/controllers", "#{Webpacker.config.source_path}/controllers"
say "Installing all Stimulus dependencies"
run "yarn add stimulus"
say "Webpacker now supports Stimulus.js 🎉", :green
webpacker-5.4.3/lib/install/erb.rb 0000644 0000041 0000041 00000001777 14123265223 017043 0 ustar www-data www-data require "webpacker/configuration"
say "Copying erb loader to config/webpack/loaders"
copy_file "#{__dir__}/loaders/erb.js", Rails.root.join("config/webpack/loaders/erb.js").to_s
say "Adding erb loader to config/webpack/environment.js"
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"const erb = require('./loaders/erb')\n",
after: /require\(('|")@rails\/webpacker\1\);?\n/
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"environment.loaders.prepend('erb', erb)\n",
before: "module.exports"
say "Updating webpack paths to include .erb file extension"
insert_into_file Webpacker.config.config_path, "- .erb\n".indent(4), after: /\s+extensions:\n/
say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/erb/hello_erb.js.erb",
"#{Webpacker.config.source_entry_path}/hello_erb.js.erb"
say "Installing all Erb dependencies"
run "yarn add rails-erb-loader"
say "Webpacker now supports Erb in JS 🎉", :green
webpacker-5.4.3/lib/install/template.rb 0000644 0000041 0000041 00000004551 14123265223 020077 0 ustar www-data www-data # Install Webpacker
copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
say "Copying webpack core config"
directory "#{__dir__}/config/webpack", "config/webpack"
say "Copying postcss.config.js to app root directory"
copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"
say "Copying babel.config.js to app root directory"
copy_file "#{__dir__}/config/babel.config.js", "babel.config.js"
say "Copying .browserslistrc to app root directory"
copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"
if Dir.exists?(Webpacker.config.source_path)
say "The JavaScript app source directory already exists"
else
say "Creating JavaScript app source directory"
directory "#{__dir__}/javascript", Webpacker.config.source_path
end
apply "#{__dir__}/binstubs.rb"
if File.exists?(".gitignore")
append_to_file ".gitignore" do
"\n" +
"/public/packs\n" +
"/public/packs-test\n" +
"/node_modules\n" +
"/yarn-error.log\n" +
"yarn-debug.log*\n" +
".yarn-integrity\n"
end
end
if Webpacker::VERSION.match?(/^[0-9]+\.[0-9]+\.[0-9]+$/)
say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
else
say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
run "yarn add @rails/webpacker@next"
end
package_json = File.read("#{__dir__}/../../package.json")
webpack_version = package_json.match(/"webpack": "(.*)"/)[1]
webpack_cli_version = package_json.match(/"webpack-cli": "(.*)"/)[1]
# needed for experimental Yarn 2 support and should not harm Yarn 1
say "Installing webpack and webpack-cli as direct dependencies"
run "yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}"
say "Installing dev server for live reloading"
run "yarn add --dev webpack-dev-server@^3"
if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
say "You need to allow webpack-dev-server host as allowed origin for connect-src.", :yellow
say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow
say "config/initializers/content_security_policy.rb with a snippet like this:", :yellow
say "policy.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
end
say "Webpacker successfully installed 🎉 🍰", :green
webpacker-5.4.3/lib/install/vue.rb 0000644 0000041 0000041 00000004071 14123265223 017060 0 ustar www-data www-data require "webpacker/configuration"
say "Copying vue loader to config/webpack/loaders"
copy_file "#{__dir__}/loaders/vue.js", Rails.root.join("config/webpack/loaders/vue.js").to_s
say "Adding vue loader plugin to config/webpack/environment.js"
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"const { VueLoaderPlugin } = require('vue-loader')\n",
after: /require\(('|")@rails\/webpacker\1\);?\n/
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())\n",
before: "module.exports"
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",
after: "require('vue-loader')\n"
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"environment.loaders.prepend('vue', vue)\n",
before: "module.exports"
say "Updating webpack paths to include .vue file extension"
insert_into_file Webpacker.config.config_path, "- .vue\n".indent(4), after: /\s+extensions:\n/
say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/vue/hello_vue.js",
"#{Webpacker.config.source_entry_path}/hello_vue.js"
say "Copying Vue app file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/vue/app.vue",
"#{Webpacker.config.source_path}/app.vue"
say "Installing all Vue dependencies"
run "yarn add vue vue-loader vue-template-compiler"
if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
say "You need to enable unsafe-eval rule.", :yellow
say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow
say "config/initializers/content_security_policy.rb with a snippet like this:", :yellow
say "if Rails.env.development?", :yellow
say " policy.script_src :self, :https, :unsafe_eval", :yellow
say "else", :yellow
say " policy.script_src :self, :https", :yellow
say "end", :yellow
end
say "Webpacker now supports Vue.js 🎉", :green
webpacker-5.4.3/lib/install/bin/ 0000755 0000041 0000041 00000000000 14123265223 016502 5 ustar www-data www-data webpacker-5.4.3/lib/install/bin/webpack 0000755 0000041 0000041 00000000636 14123265223 020051 0 ustar www-data www-data #!/usr/bin/env ruby
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
require "bundler/setup"
require "webpacker"
require "webpacker/webpack_runner"
APP_ROOT = File.expand_path("..", __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::WebpackRunner.run(ARGV)
end
webpacker-5.4.3/lib/install/bin/webpack-dev-server 0000755 0000041 0000041 00000000643 14123265223 022127 0 ustar www-data www-data #!/usr/bin/env ruby
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
require "bundler/setup"
require "webpacker"
require "webpacker/dev_server_runner"
APP_ROOT = File.expand_path("..", __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::DevServerRunner.run(ARGV)
end
webpacker-5.4.3/lib/install/examples/ 0000755 0000041 0000041 00000000000 14123265223 017550 5 ustar www-data www-data webpacker-5.4.3/lib/install/examples/react/ 0000755 0000041 0000041 00000000000 14123265223 020646 5 ustar www-data www-data webpacker-5.4.3/lib/install/examples/react/tsconfig.json 0000644 0000041 0000041 00000000624 14123265223 023357 0 ustar www-data www-data {
"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
}
webpacker-5.4.3/lib/install/examples/react/babel.config.js 0000644 0000041 0000041 00000004402 14123265223 023515 0 ustar www-data www-data 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 && [
'@babel/preset-env',
{
targets: {
node: 'current'
},
modules: 'commonjs'
},
'@babel/preset-react'
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
[
'@babel/preset-react',
{
development: isDevelopmentEnv || isTestEnv,
useBuiltIns: true
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'@babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'@babel/plugin-transform-destructuring',
[
'@babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'@babel/plugin-proposal-private-methods',
{
loose: true
}
],
[
'@babel/plugin-proposal-private-property-in-object',
{
loose: true
}
],
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'@babel/plugin-transform-regenerator',
{
async: false
}
],
isProductionEnv && [
'babel-plugin-transform-react-remove-prop-types',
{
removeImport: true
}
]
].filter(Boolean)
}
}
webpacker-5.4.3/lib/install/examples/react/hello_react.jsx 0000644 0000041 0000041 00000001204 14123265223 023652 0 ustar www-data www-data // Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render Hello React
at the bottom
// of the page.
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
const Hello = props => (
Hello {props.name}!
)
Hello.defaultProps = {
name: 'David'
}
Hello.propTypes = {
name: PropTypes.string
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
Loading...
//
// <%= javascript_pack_tag 'hello_angular' %>
require('../hello_angular')
webpacker-5.4.3/lib/install/examples/angular/hello_angular/ 0000755 0000041 0000041 00000000000 14123265223 024015 5 ustar www-data www-data webpacker-5.4.3/lib/install/examples/angular/hello_angular/index.ts 0000644 0000041 0000041 00000000406 14123265223 025474 0 ustar www-data www-data import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(AppModule);
});
webpacker-5.4.3/lib/install/examples/angular/hello_angular/app/ 0000755 0000041 0000041 00000000000 14123265223 024575 5 ustar www-data www-data webpacker-5.4.3/lib/install/examples/angular/hello_angular/app/app.component.ts 0000644 0000041 0000041 00000000262 14123265223 027726 0 ustar www-data www-data import { Component } from '@angular/core';
@Component({
selector: 'hello-angular',
template: `Hello {{name}} `
})
export class AppComponent {
name = 'Angular!';
}
webpacker-5.4.3/lib/install/examples/angular/hello_angular/app/app.module.ts 0000644 0000041 0000041 00000000472 14123265223 027214 0 ustar www-data www-data import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
webpacker-5.4.3/lib/install/examples/angular/hello_angular/polyfills.ts 0000644 0000041 0000041 00000004761 14123265223 026412 0 ustar www-data www-data /**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** Evergreen browsers require these. **/
import 'core-js/es/reflect';
import 'core-js/proposals/reflect-metadata';
/**
* Required to support Web Animations `@angular/animation`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone';
// import 'zone.js/dist/long-stack-trace-zone' // async stack traces with zone.js
/***************************************************************************************************
* APPLICATION IMPORTS
*/
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
// import 'intl'; // Run `npm install --save intl`.
/**
* Need to import at least one locale-data with intl.
*/
// import 'intl/locale-data/jsonp/en';
webpacker-5.4.3/lib/install/examples/erb/ 0000755 0000041 0000041 00000000000 14123265223 020320 5 ustar www-data www-data webpacker-5.4.3/lib/install/examples/erb/hello_erb.js.erb 0000644 0000041 0000041 00000000437 14123265223 023364 0 ustar www-data www-data // Run this example by adding <%%= javascript_pack_tag 'hello_erb' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. Don't forget to uncomment erb tag after adding it to your layout file.
<% name = 'Erb' %>
console.log('Hello world from <%= name %>')
webpacker-5.4.3/lib/install/examples/stimulus/ 0000755 0000041 0000041 00000000000 14123265223 021435 5 ustar www-data www-data webpacker-5.4.3/lib/install/examples/stimulus/controllers/ 0000755 0000041 0000041 00000000000 14123265223 024003 5 ustar www-data www-data webpacker-5.4.3/lib/install/examples/stimulus/controllers/index.js 0000644 0000041 0000041 00000000614 14123265223 025451 0 ustar www-data www-data // Load all the controllers within this directory and all subdirectories.
// Controller files must be named *_controller.js.
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))
webpacker-5.4.3/lib/install/examples/stimulus/controllers/hello_controller.js 0000644 0000041 0000041 00000000700 14123265223 027704 0 ustar www-data www-data // Visit The Stimulus Handbook for more details
// https://stimulusjs.org/handbook/introduction
//
// This example controller works with specially annotated HTML like:
//
//
//
Hello Vue
at the bottom of the page.
import Vue from 'vue'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
console.log(app)
})
// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
//
//
// import Vue from 'vue/dist/vue.esm'
// import App from '../app.vue'
//
// document.addEventListener('DOMContentLoaded', () => {
// const app = new Vue({
// el: '#hello',
// data: {
// message: "Can you say hello?"
// },
// components: { App }
// })
// })
//
//
//
// If the project is using turbolinks, install 'vue-turbolinks':
//
// yarn add vue-turbolinks
//
// Then uncomment the code block below:
//
// import TurbolinksAdapter from 'vue-turbolinks'
// import Vue from 'vue/dist/vue.esm'
// import App from '../app.vue'
//
// Vue.use(TurbolinksAdapter)
//
// document.addEventListener('turbolinks:load', () => {
// const app = new Vue({
// el: '#hello',
// data: () => {
// return {
// message: "Can you say hello?"
// }
// },
// components: { App }
// })
// })
webpacker-5.4.3/lib/install/examples/vue/app.vue 0000644 0000041 0000041 00000000401 14123265223 021643 0 ustar www-data www-data
webpacker-5.4.3/lib/install/examples/svelte/ 0000755 0000041 0000041 00000000000 14123265223 021052 5 ustar www-data www-data webpacker-5.4.3/lib/install/examples/svelte/hello_svelte.js 0000644 0000041 0000041 00000001056 14123265223 024077 0 ustar www-data www-data /* eslint no-console: 0 */
// Run this example by adding <%= javascript_pack_tag 'hello_svelte' %> (and
// <%= stylesheet_pack_tag 'hello_svelte' %> if you have styles in your component)
// to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render Hello Svelte!
at the bottom of the page.
import App from '../app.svelte'
document.addEventListener('DOMContentLoaded', () => {
const app = new App({
target: document.body,
props: {
name: 'Svelte'
}
});
window.app = app;
})
webpacker-5.4.3/lib/install/examples/svelte/app.svelte 0000644 0000041 0000041 00000000156 14123265223 023060 0 ustar www-data www-data
Hello {name}! webpacker-5.4.3/lib/install/typescript.rb 0000644 0000041 0000041 00000003000 14123265223 020456 0 ustar www-data www-data require "webpacker/configuration"
additional_packages = ""
example_source = "typescript"
# Additional configuration is required for React projects
package_json = Rails.root.join("package.json")
if File.exist?(package_json)
package = JSON.parse(File.read(package_json))
package["dependencies"] ||= {}
if package["dependencies"].key?("react")
additional_packages = "@types/react @types/react-dom"
example_source = "react"
end
end
say "Adding TypeScript preset to babel.config.js"
insert_into_file Rails.root.join("babel.config.js").to_s,
",\n ['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]",
before: /\s*\].filter\(Boolean\),\n\s*plugins: \[/
say "Copying tsconfig.json to the Rails root directory for typescript"
copy_file "#{__dir__}/examples/#{example_source}/tsconfig.json", "tsconfig.json"
say "Updating webpack paths to include .ts file extension"
insert_into_file Webpacker.config.config_path, "- .ts\n".indent(4), after: /\s+extensions:\n/
say "Updating webpack paths to include .tsx file extension"
insert_into_file Webpacker.config.config_path, "- .tsx\n".indent(4), after: /\s+extensions:\n/
say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/typescript/hello_typescript.ts",
"#{Webpacker.config.source_entry_path}/hello_typescript.ts"
say "Installing all typescript dependencies"
run "yarn add typescript @babel/preset-typescript #{additional_packages}"
say "Webpacker now supports typescript 🎉", :green
webpacker-5.4.3/lib/install/config/ 0000755 0000041 0000041 00000000000 14123265223 017177 5 ustar www-data www-data webpacker-5.4.3/lib/install/config/webpacker.yml 0000644 0000041 0000041 00000003362 14123265223 021671 0 ustar www-data www-data # Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
webpacker-5.4.3/lib/install/config/babel.config.js 0000644 0000041 0000041 00000003551 14123265223 022052 0 ustar www-data www-data 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 && [
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'@babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'@babel/plugin-transform-destructuring',
[
'@babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'@babel/plugin-proposal-private-methods',
{
loose: true
}
],
[
'@babel/plugin-proposal-private-property-in-object',
{
loose: true
}
],
[
'@babel/plugin-transform-runtime',
{
helpers: false
}
],
[
'@babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}
webpacker-5.4.3/lib/install/config/.browserslistrc 0000644 0000041 0000041 00000000011 14123265223 022257 0 ustar www-data www-data defaults
webpacker-5.4.3/lib/install/config/postcss.config.js 0000644 0000041 0000041 00000000340 14123265223 022474 0 ustar www-data www-data module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
webpacker-5.4.3/lib/install/config/webpack/ 0000755 0000041 0000041 00000000000 14123265223 020613 5 ustar www-data www-data webpacker-5.4.3/lib/install/config/webpack/test.js 0000644 0000041 0000041 00000000233 14123265223 022126 0 ustar www-data www-data process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
webpacker-5.4.3/lib/install/config/webpack/development.js 0000644 0000041 0000041 00000000233 14123265223 023471 0 ustar www-data www-data process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
webpacker-5.4.3/lib/install/config/webpack/production.js 0000644 0000041 0000041 00000000232 14123265223 023334 0 ustar www-data www-data process.env.NODE_ENV = process.env.NODE_ENV || 'production'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
webpacker-5.4.3/lib/install/config/webpack/environment.js 0000644 0000041 0000041 00000000122 14123265223 023510 0 ustar www-data www-data const { environment } = require('@rails/webpacker')
module.exports = environment
webpacker-5.4.3/lib/install/binstubs.rb 0000644 0000041 0000041 00000000152 14123265223 020106 0 ustar www-data www-data say "Copying binstubs"
directory "#{__dir__}/bin", "bin"
chmod "bin", 0755 & ~File.umask, verbose: false
webpacker-5.4.3/lib/install/angular.rb 0000644 0000041 0000041 00000002176 14123265223 017716 0 ustar www-data www-data require "webpacker/configuration"
say "Copying angular example entry file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/angular/hello_angular.js", "#{Webpacker.config.source_entry_path}/hello_angular.js"
say "Copying hello_angular app to #{Webpacker.config.source_path}"
directory "#{__dir__}/examples/angular/hello_angular", "#{Webpacker.config.source_path}/hello_angular"
say "Installing all angular dependencies"
run "yarn add core-js zone.js rxjs @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic"
if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
say "You need to enable unsafe-eval rule.", :yellow
say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow
say "config/initializers/content_security_policy.rb with a snippet like this:", :yellow
say "if Rails.env.development?", :yellow
say " policy.script_src :self, :https, :unsafe_eval", :yellow
say "else", :yellow
say " policy.script_src :self, :https", :yellow
say "end", :yellow
end
say "Webpacker now supports angular 🎉", :green
webpacker-5.4.3/lib/install/coffee.rb 0000644 0000041 0000041 00000002104 14123265223 017503 0 ustar www-data www-data require "webpacker/configuration"
say "Copying coffee loader to config/webpack/loaders"
copy_file "#{__dir__}/loaders/coffee.js", Rails.root.join("config/webpack/loaders/coffee.js").to_s
say "Adding coffee loader to config/webpack/environment.js"
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"const coffee = require('./loaders/coffee')\n",
after: /require\(('|")@rails\/webpacker\1\);?\n/
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"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".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",
"#{Webpacker.config.source_entry_path}/hello_coffee.coffee"
say "Installing all Coffeescript dependencies"
run "yarn add coffeescript@1.12.7 coffee-loader"
say "Webpacker now supports Coffeescript 🎉", :green
webpacker-5.4.3/lib/install/elm.rb 0000644 0000041 0000041 00000003046 14123265223 017037 0 ustar www-data www-data require "webpacker/configuration"
say "Copying elm loader to config/webpack/loaders"
copy_file "#{__dir__}/loaders/elm.js", Rails.root.join("config/webpack/loaders/elm.js").to_s
say "Adding elm loader to config/webpack/environment.js"
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"const elm = require('./loaders/elm')\n",
after: /require\(('|")@rails\/webpacker\1\);?\n/
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
"environment.loaders.prepend('elm', elm)\n",
before: "module.exports"
say "Copying Elm example entry file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/elm/hello_elm.js",
"#{Webpacker.config.source_entry_path}/hello_elm.js"
say "Copying Elm app file to #{Webpacker.config.source_path}"
copy_file "#{__dir__}/examples/elm/Main.elm",
"#{Webpacker.config.source_path}/Main.elm"
say "Installing all Elm dependencies"
run "yarn add elm elm-webpack-loader"
run "yarn add --dev elm-hot-webpack-loader"
run "yarn run elm init"
run "yarn run elm make #{Webpacker.config.source_path}/Main.elm"
say "Updating webpack paths to include .elm file extension"
insert_into_file Webpacker.config.config_path, "- .elm\n".indent(4), after: /\s+extensions:\n/
say "Updating Elm source location"
gsub_file "elm.json", /\"src\"\n/,
%("#{Webpacker.config.source_path.relative_path_from(Rails.root)}"\n)
say "Updating .gitignore to include elm-stuff folder"
insert_into_file ".gitignore", "/elm-stuff\n", before: "/node_modules\n"
say "Webpacker now supports Elm 🎉", :green
webpacker-5.4.3/lib/install/react.rb 0000644 0000041 0000041 00000001557 14123265223 017365 0 ustar www-data www-data require "webpacker/configuration"
require "fileutils"
replace_babel_config = FileUtils.compare_file(Rails.root.join("babel.config.js"), "#{__dir__}/config/babel.config.js")
say "Copying babel.config.js to app root directory"
copy_file "#{__dir__}/examples/react/babel.config.js", "babel.config.js", force: replace_babel_config
say "Copying react example entry file to #{Webpacker.config.source_entry_path}"
copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"
say "Updating webpack paths to include .jsx file extension"
insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /\s+extensions:\n/
say "Installing all react dependencies"
run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types"
say "Webpacker now supports react.js 🎉", :green
webpacker-5.4.3/lib/install/loaders/ 0000755 0000041 0000041 00000000000 14123265223 017363 5 ustar www-data www-data webpacker-5.4.3/lib/install/loaders/vue.js 0000644 0000041 0000041 00000000127 14123265223 020520 0 ustar www-data www-data module.exports = {
test: /\.vue(\.erb)?$/,
use: [{
loader: 'vue-loader'
}]
}
webpacker-5.4.3/lib/install/loaders/elm.js 0000644 0000041 0000041 00000001235 14123265223 020477 0 ustar www-data www-data const { resolve } = require('path')
const isProduction = process.env.NODE_ENV === 'production'
const isDevelopment = process.env.NODE_ENV === 'development'
const elmSource = resolve(process.cwd())
const elmBinary = `${elmSource}/node_modules/.bin/elm`
const options = {
cwd: elmSource,
pathToElm: elmBinary,
optimize: isProduction,
verbose: isDevelopment,
debug: isDevelopment
}
const elmWebpackLoader = {
loader: 'elm-webpack-loader',
options: options
}
module.exports = {
test: /\.elm(\.erb)?$/,
exclude: [/elm-stuff/, /node_modules/],
use: isProduction ? [elmWebpackLoader] : [{ loader: 'elm-hot-webpack-loader' }, elmWebpackLoader]
}
webpacker-5.4.3/lib/install/loaders/svelte.js 0000644 0000041 0000041 00000000213 14123265223 021217 0 ustar www-data www-data module.exports = {
test: /\.svelte(\.erb)?$/,
use: [{
loader: 'svelte-loader',
options: {
hotReload: false
}
}],
}
webpacker-5.4.3/lib/install/loaders/coffee.js 0000644 0000041 0000041 00000000135 14123265223 021147 0 ustar www-data www-data module.exports = {
test: /\.coffee(\.erb)?$/,
use: [{
loader: 'coffee-loader'
}]
}
webpacker-5.4.3/lib/install/loaders/erb.js 0000644 0000041 0000041 00000000352 14123265223 020471 0 ustar www-data www-data module.exports = {
test: /\.erb$/,
enforce: 'pre',
exclude: /node_modules/,
use: [{
loader: 'rails-erb-loader',
options: {
runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
}
}]
}
webpacker-5.4.3/lib/install/javascript/ 0000755 0000041 0000041 00000000000 14123265223 020100 5 ustar www-data www-data webpacker-5.4.3/lib/install/javascript/packs/ 0000755 0000041 0000041 00000000000 14123265223 021201 5 ustar www-data www-data webpacker-5.4.3/lib/install/javascript/packs/application.js 0000644 0000041 0000041 00000001520 14123265223 024040 0 ustar www-data www-data /* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
console.log('Hello World from Webpacker')
webpacker-5.4.3/lib/webpacker/ 0000755 0000041 0000041 00000000000 14123265223 016227 5 ustar www-data www-data webpacker-5.4.3/lib/webpacker/runner.rb 0000644 0000041 0000041 00000001414 14123265223 020065 0 ustar www-data www-data module Webpacker
class Runner
def self.run(argv)
$stdout.sync = true
new(argv).run
end
def initialize(argv)
@argv = argv
@app_path = File.expand_path(".", Dir.pwd)
@node_modules_bin_path = ENV["WEBPACKER_NODE_MODULES_BIN_PATH"] || `yarn bin`.chomp
@webpack_config = File.join(@app_path, "config/webpack/#{ENV["NODE_ENV"]}.js")
@webpacker_config = File.join(@app_path, "config/webpacker.yml")
unless File.exist?(@webpack_config)
$stderr.puts "webpack config #{@webpack_config} not found, please run 'bundle exec rails webpacker:install' to install Webpacker with default configs or add the missing config file for your custom environment."
exit!
end
end
end
end
webpacker-5.4.3/lib/webpacker/version.rb 0000644 0000041 0000041 00000000144 14123265223 020240 0 ustar www-data www-data module Webpacker
# Change the version in package.json too, please!
VERSION = "5.4.3".freeze
end
webpacker-5.4.3/lib/webpacker/helper.rb 0000644 0000041 0000041 00000021276 14123265223 020043 0 ustar www-data www-data module Webpacker::Helper
# Returns the current Webpacker instance.
# Could be overridden to use multiple Webpacker
# configurations within the same app (e.g. with engines).
def current_webpacker_instance
Webpacker.instance
end
# Computes the relative path for a given Webpacker asset.
# Returns the relative path using manifest.json and passes it to path_to_asset helper.
# This will use path_to_asset internally, so most of their behaviors will be the same.
#
# Example:
#
# # When extract_css is false in webpacker.yml and the file is a css:
# <%= asset_pack_path 'calendar.css' %> # => nil
#
# # When extract_css is true in webpacker.yml or the file is not a css:
# <%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"
def asset_pack_path(name, **options)
if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
path_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
end
end
# Computes the absolute path for a given Webpacker asset.
# Returns the absolute path using manifest.json and passes it to url_to_asset helper.
# This will use url_to_asset internally, so most of their behaviors will be the same.
#
# Example:
#
# # When extract_css is false in webpacker.yml and the file is a css:
# <%= asset_pack_url 'calendar.css' %> # => nil
#
# # When extract_css is true in webpacker.yml or the file is not a css:
# <%= asset_pack_url 'calendar.css' %> # => "http://example.com/packs/calendar-1016838bab065ae1e122.css"
def asset_pack_url(name, **options)
if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
url_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
end
end
# Creates an image tag that references the named pack file.
#
# Example:
#
# <%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>
# 
<% # => 
%>
<%= image_pack_tag 'media/images/calendar.png' %>
<% # =>