Rails with Webpack

Question

I am using ReactOnRails app and I have node-modules folder with packages installed using npm. How can I make these javascript libaries available in app/assets/javascript/application.js, so I do not have to for example install jquery in my modules and in my Gemfile?

This is my webpack config file:

/* eslint comma-dangle: ["error",
  {"functions": "never", "arrays": "only-multiline", "objects":
"only-multiline"} ] */

const webpack = require('webpack');
const path = require('path');

const devBuild = process.env.NODE_ENV !== 'production';
const nodeEnv = devBuild ? 'development' : 'production';

const config = {
  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/bundles/Home/startup/registration',
  ],

  output: {
    filename: 'webpack-bundle.js',
    path: '../app/assets/webpack',
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom'),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv),
      },
    }),
  ],
  module: {
    loaders: [
      {
        test: require.resolve('react'),
        loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  config.plugins.push(
    new webpack.optimize.DedupePlugin()
  );
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}

Have you considered using webpacker instead? github.com/rails/webpacker Rails 5.1 will officially support webpack: github.com/rails/rails/pull/27288 — Peter
– Peter, Commented Feb 15, 2017 at 22:25
I have not heard about webpacker yet. I will check it out. And wow, that are some great news about rails 5.1! — mdmb
– mdmb, Commented Feb 16, 2017 at 22:50

Tombart · Accepted Answer · 2017-05-03 07:52:36Z

7

Rails 5.1 comes with webpacker and removed default jquery-rails dependency, but you could still use it if you like. In template:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

will compile JS using traditional assets pipeline (from app/assets/javascript/application.js).

While

<%= javascript_pack_tag 'application' %>

will compile your JS module from app/javascript/packs/application.js using webpacker. You can trigger manual module compilation using:

rails webpacker:compile

answered May 3, 2017 at 7:52

Tombart

32.9k16 gold badges134 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ckhatton Over a year ago

OMG thank you! rails webpacker:compile was what I was missing - I was wondering why my pack assets weren't updating!

Collectives™ on Stack Overflow

Rails with Webpack

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related