Webpack help - add hot loading and source mapping to a React / Node Project

Question

I'm a webpack newbie. I'm trying to add React to a simple Node project but I've only ever used React with a pre set up webpack dev server and not with another server. Webpack runs it's own node server so this poses one problem for me.

Here's what I need help with:

How do I add hot loading and source mapping if I'm using Express?
How can I add a global Bootstrap css from my public folder with webpack to this project (is there a way to do that kinda of how I did this with the js files and html-webpack-plugin)?

I've tried using webpack's dev server to get get hot loading but I've run into the problem where I have two servers conflicting: webpack and app.js server.

Here's part of my app.js file

var app = module.exports = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));

//API Routes

// all other requests
app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// Starting server
http.createServer(app).listen(port);

.babelrc

{
  "presets": [
    "react",
    "es2015",
    "stage-0"
  ]
}

webpack.config.babel

import webpack from 'webpack'

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/public/index.html',
  filename: 'index.html',
  inject: 'body'
})

const base = {
  entry: {
    "jquery": __dirname + '/public/js/lib/jquery/jquery-2.0.3.min.js',
    "bootstrap": __dirname + '/public/bootstrap/js/bootstrap.min.js',
    "index": __dirname + '/app',
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'}
    ]
  },
}

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  plugins: [HTMLWebpackPluginConfig]
}

export default Object.assign({}, base, developmentConfig)

I tried adding new ExtractTextPlugin("dist/[name].css") to plugins and replacing my css loader with loader: ExtractTextPlugin.extract("style-loader", "css-loader") but I'm still not able to add bootstrap css or any css to my app.

Cassidy · Accepted Answer · 2017-02-19 01:51:21Z

1

Notice in your webpack.config.babel file you have this output:

  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
  },

You need to put this [name].js file in your dist/index.html.

This blog post might be helpful for you for getting yourself properly set up!

answered Feb 19, 2017 at 1:51

Cassidy

3,3635 gold badges41 silver badges81 bronze badges

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

6 Comments

Turnipdabeets Over a year ago

Isn't that what html-webpack-plugin is doing? It's adding my js files to my index.html file in my dist folder. Or are you saying something else?

Cassidy Over a year ago

I see, what is [name].js? Can you name it something explicitly like react.js (without the []) and see if it gets imported? It might be breaking on the brackets.

Turnipdabeets Over a year ago

[name].js is like a variable place holder for the key I in the entry object.

Turnipdabeets Over a year ago

I updated my question to make it more clear. The js stuff is working ok. I need help with compiling css, hot loading and source mapping when using express and not webpack's dev server.

Turnipdabeets Over a year ago

@ming-soon I thought you might have some good insight here :)

|

Collectives™ on Stack Overflow

Webpack help - add hot loading and source mapping to a React / Node Project

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related