<commit_before># Webpacker

![travis-ci status](https://api.travis-ci.org/rails/webpacker.svg?branch=master)
[![node.js](https://img.shields.io/badge/node-%3E%3D%206.4.0-brightgreen.svg)](https://nodejs.org/en/)
[![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://github.com/rails/webpacker)

Webpacker makes it easy to use the JavaScript pre-processor and bundler
[Webpack 2.x.x+](https://webpack.js.org/)
to manage application-like JavaScript in Rails. It coexists with the asset pipeline,
as the primary purpose for Webpack is app-like JavaScript, not images, CSS, or
even JavaScript Sprinkles (that all continues to live in app/assets).

However, it is possible to use Webpacker for CSS, images and fonts assets as well,
in which case you may not even need the asset pipeline. This is mostly relevant when exclusively using component-based JavaScript frameworks.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table of Contents

- [Prerequisites](#prerequisites)
- [Features](#features)
- [Installation](#installation)
- [Integrations](#integrations)
  - [React](#react)
  - [Angular with TypeScript](#angular-with-typescript)
  - [Vue](#vue)
  - [Elm](#elm)
- [Binstubs](#binstubs)
  - [Webpack dev server](#webpack-dev-server)
  - [Webpack](#webpack)
- [Configuration](#configuration)
  - [Webpack](#webpack-1)
  - [Loaders](#loaders)
  - [Paths](#paths)
  - [Babel](#babel)
  - [Post-Processing CSS](#post-processing-css)
  - [CDN](#cdn)
  - [HTTPS in development](#https-in-development)
  - [Hot module replacement](#hot-module-replacement)
- [Linking Styles, Images and Fonts](#linking-styles-images-and-fonts)
  - [Within your JS app](#within-your-js-app)
  - [Inside views](#inside-views)
  - [From node modules folder](#from-node-modules-folder)
- [How-tos](#how-tos)
  - [App structure](#app-structure)
    - [Namespacing](#namespacing)
  - [Pass data from view](#pass-data-from-view)
    - [React](#react-1)
    - [Vue](#vue-1)
  - [Add common chunks](#add-common-chunks)
  - [Module import() vs require()](#module-import-vs-require)
  - [Add a new npm module](#add-a-new-npm-module)
  - [Add bootstrap](#add-bootstrap)
  - [Use Typescript with React](#use-typescript-with-react)
  - [HTML templates with Typescript](#html-templates-with-typescript)
  - [CSS modules](#css-modules)
  - [CSS-Next](#css-next)
  - [Ignoring swap files](#ignoring-swap-files)
  - [Link sprocket assets](#link-sprocket-assets)
    - [Using helpers](#using-helpers)
    - [Using babel module resolver](#using-babel-module-resolver)
- [Extending](#extending)
- [Deployment](#deployment)
  - [Heroku](#heroku)
- [Testing](#testing)
- [Troubleshooting](#troubleshooting)
- [Wishlist](#wishlist)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->


## Prerequisites

* Ruby 2.2+
* Rails 4.2+
* Node.js 6.4.0+
* Yarn 0.20.1+


## Features

* [Webpack 2](https://webpack.js.org/)
* ES6 with [babel](https://babeljs.io/)
* Automatic code splitting using multiple entry points
* Stylesheets - sass and CSS
* Images and fonts
* PostCSS - auto-prefixer
* Asset compression, source-maps, and minification
* CDN support
* React, Angular, Elm and Vue support out-of-the-box
* Rails view helpers
* Extensible and configurable


## Installation

You can either add Webpacker during setup of a new Rails 5.1+ application
using new `--webpack` option:

```bash
# Available Rails 5.1+
./bin/rails new myapp --webpack
```

Or add it to your `Gemfile`, run bundle and `./bin/rails webpacker:install` or `bundle exec rake webpacker:install` (on rails version < 5.0):

```ruby
# Gemfile
gem 'webpacker', '~> 2.0'

# OR if you prefer to use master
gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
```

**Note:** Use `rake` instead of `rails` if you are using webpacker
with rails version < 5.0


## Integrations

Webpacker by default 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:

```bash
./bin/rails webpacker
```

or in rails version < 5.0

```bash
./bin/rake webpacker
```<commit_msg>Fix new-app setup command<commit_after># Webpacker

![travis-ci status](https://api.travis-ci.org/rails/webpacker.svg?branch=master)
[![node.js](https://img.shields.io/badge/node-%3E%3D%206.4.0-brightgreen.svg)](https://nodejs.org/en/)
[![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://github.com/rails/webpacker)

Webpacker makes it easy to use the JavaScript pre-processor and bundler
[Webpack 2.x.x+](https://webpack.js.org/)
to manage application-like JavaScript in Rails. It coexists with the asset pipeline,
as the primary purpose for Webpack is app-like JavaScript, not images, CSS, or
even JavaScript Sprinkles (that all continues to live in app/assets).

However, it is possible to use Webpacker for CSS, images and fonts assets as well,
in which case you may not even need the asset pipeline. This is mostly relevant when exclusively using component-based JavaScript frameworks.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Table of Contents

- [Prerequisites](#prerequisites)
- [Features](#features)
- [Installation](#installation)
- [Integrations](#integrations)
  - [React](#react)
  - [Angular with TypeScript](#angular-with-typescript)
  - [Vue](#vue)
  - [Elm](#elm)
- [Binstubs](#binstubs)
  - [Webpack dev server](#webpack-dev-server)
  - [Webpack](#webpack)
- [Configuration](#configuration)
  - [Webpack](#webpack-1)
  - [Loaders](#loaders)
  - [Paths](#paths)
  - [Babel](#babel)
  - [Post-Processing CSS](#post-processing-css)
  - [CDN](#cdn)
  - [HTTPS in development](#https-in-development)
  - [Hot module replacement](#hot-module-replacement)
- [Linking Styles, Images and Fonts](#linking-styles-images-and-fonts)
  - [Within your JS app](#within-your-js-app)
  - [Inside views](#inside-views)
  - [From node modules folder](#from-node-modules-folder)
- [How-tos](#how-tos)
  - [App structure](#app-structure)
    - [Namespacing](#namespacing)
  - [Pass data from view](#pass-data-from-view)
    - [React](#react-1)
    - [Vue](#vue-1)
  - [Add common chunks](#add-common-chunks)
  - [Module import() vs require()](#module-import-vs-require)
  - [Add a new npm module](#add-a-new-npm-module)
  - [Add bootstrap](#add-bootstrap)
  - [Use Typescript with React](#use-typescript-with-react)
  - [HTML templates with Typescript](#html-templates-with-typescript)
  - [CSS modules](#css-modules)
  - [CSS-Next](#css-next)
  - [Ignoring swap files](#ignoring-swap-files)
  - [Link sprocket assets](#link-sprocket-assets)
    - [Using helpers](#using-helpers)
    - [Using babel module resolver](#using-babel-module-resolver)
- [Extending](#extending)
- [Deployment](#deployment)
  - [Heroku](#heroku)
- [Testing](#testing)
- [Troubleshooting](#troubleshooting)
- [Wishlist](#wishlist)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->


## Prerequisites

* Ruby 2.2+
* Rails 4.2+
* Node.js 6.4.0+
* Yarn 0.20.1+


## Features

* [Webpack 2](https://webpack.js.org/)
* ES6 with [babel](https://babeljs.io/)
* Automatic code splitting using multiple entry points
* Stylesheets - sass and CSS
* Images and fonts
* PostCSS - auto-prefixer
* Asset compression, source-maps, and minification
* CDN support
* React, Angular, Elm and Vue support out-of-the-box
* Rails view helpers
* Extensible and configurable


## Installation

You can either add Webpacker during setup of a new Rails 5.1+ application
using new `--webpack` option:

```bash
# Available Rails 5.1+
rails new myapp --webpack
```

Or add it to your `Gemfile`, run bundle and `./bin/rails webpacker:install` or `bundle exec rake webpacker:install` (on rails version < 5.0):

```ruby
# Gemfile
gem 'webpacker', '~> 2.0'

# OR if you prefer to use master
gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
```

**Note:** Use `rake` instead of `rails` if you are using webpacker
with rails version < 5.0


## Integrations

Webpacker by default 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:

```bash
./bin/rails webpacker
```

or in rails version < 5.0

```bash
./bin/rake webpacker
```
{'fraction_non_alphanumeric': 0.1558288011350201, 'fraction_numerical': 0.00851265074485694, 'mean_word_length': 4.202337023370234, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 11, 'https://': 18, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3644415', 'n_tokens_mistral': 3037, 'n_tokens_neox': 2766, 'n_words': 779}