CODEWITHSUNDEEP
ruby-on-railswebpack-dev-serverreact-hot-loader
mikeLspohn
mikeLspohn

Reputation: 495

Webpack with react-hot-loading and rails

I have Webpack setup in our Rails app with React and the react-hot-loader plugin for webpack. It is successfully working and building the bundle.js file I am expecting, but it is also giving me files like this on every hot update 0.bfeb31eda5c7e8da9473.hot-update.js. The author of one of the plugins I'm using, WriteFileWebpackPlugin said that I could tell it in the test property to not watch for files with .hot in them, but I can't figure out how to get that to work.

Here's my webpack.config.js

var webpack = require('webpack')
var path = require('path')
var WriteFilePlugin = require('write-file-webpack-plugin')

module.exports = {
  // watchOptions: {
  //   poll: true
  // },
  context: __dirname + '/app/assets/javascripts',
  entry: {
    App: [
      'webpack-dev-server/client?http://localhost:8080/',
      'webpack/hot/only-dev-server',
      path.resolve(__dirname, 'app/assets/source/index.js')
    ]
  },
  output: {
    path: path.resolve(__dirname, 'app/assets/javascripts'),
    publicPath: 'http://localhost:8080/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/,
        loaders: ["react-hot", "babel"],
        include: path.resolve(__dirname, 'app/assets/source')
      }
    ]
  },
  devtool: 'inline-source-map',
  devServer: {
    outputPath: path.resolve(__dirname, 'app/assets/javascripts')
  },
  plugins: [
    new WriteFilePlugin({test: /^.*[^\.].*\.js$/}),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
}

Has anyone else ran into this? I would ideally like to figure out if this can be solved without the test property if possible, but even just figuring that out would help.

Upvotes: 1

Views: 361

Answers (1)

peter.mouland
peter.mouland

Reputation: 1983

ok, i've not used that plugin, but from you say you'll need to update the following:

old

  module: {
    loaders: [
      { test: /\.js$/,
        loaders: ["react-hot", "babel"],
        include: path.resolve(__dirname, 'app/assets/source')
      }
    ]
  },

new

module: {
    loaders: [
      { test: /^((?!(.hot-update)).)*\.js$/,
        loaders: ["react-hot", "babel"],
        include: path.resolve(__dirname, 'app/assets/source')
      }
    ]
  },

Upvotes: 1

Related Questions