Skip to content

Instantly share code, notes, and snippets.

@toshimaru
Created December 9, 2016 20:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save toshimaru/30da08111c085d2cdd9a38837b915d9b to your computer and use it in GitHub Desktop.
Save toshimaru/30da08111c085d2cdd9a38837b915d9b to your computer and use it in GitHub Desktop.
Try webpacker

Try webpacker

Try rails/webpacker

Installation

gem 'webpacker', github: "rails/webpacker"

require Rails v5.1 or more.

webpacker tasks

webpacker has two tasks:

$ rails -T | grep webpack
rails webpacker:compile                  # compile javascript packs using webpack for production with digests
rails webpacker:install                  # install webpacker in this application

webpack install

$ rails webpacker:install
      create  app/javascript
      create  app/javascript/packs/application.js
       exist  bin
      create  bin/webpack-watcher
      create  bin/webpack
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/production.js
      create  config/webpack/shared.js
      append  .gitignore
         run  ./bin/yarn add --dev webpack webpack-merge babel-loader babel-core babel-preset-es2015 coffee-loader coffee-script from "."
yarn add v0.17.9
....

Use webpack

$ ./bin/webpack
Hash: db4f0e228eb2fd13f427
Version: webpack 1.14.0
Time: 1108ms
             Asset    Size  Chunks             Chunk Names
    application.js  140 kB       0  [emitted]  application
application.js.map  162 kB       0  [emitted]  application
    + 32 hidden modules

Use react via webpacker

$ ./bin/yarn add react

app/javascript/packs/application.js:

var React = require('react')

app/views/layouts/application.html.erb:

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag    'application' %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment