1

I'm getting started with React 15. After going through tutorial and reading a few articles, I've come up with a few questions about the workflow. Here's how my index and webpack files look.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lugmety.com | The fastest, Most convenient way to order from the finest restaurants in Jeddah.</title>
    <link rel="shortcut icon" href="assets/images/lugmety-favicon.png">
    <link rel="stylesheet" href="assets/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="app"></div>

<script src="assets/js/jquery.min.js"></script>
<script src="assetsjs/bootstrap.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="/bundle.js"></script>

</body>
</html>

webpack.config.js

let webpack = require("webpack");
let path = require("path");

let DIST_DIR = path.resolve(__dirname,"dist");
let SRC_DIR = path.resolve(__dirname,"src");

let config = {
    entry: SRC_DIR + "/index.js",
    output: {
        path: DIST_DIR + "/",
        filename: "bundle.js",
        publicPath: "/"
    },
    module:{
        loaders:[
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets:["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

Here is my index.html file.

  1. Does the compilation compile scripts like jquery.js, bootstrap.js and custom scripts for eg. script.js and include it in the compiled bundle.js?

  2. In development, my images are located in src/assets/img/. I can't see the compiler copying assets into the dist folder.

  3. From where do I set the relative paths for the CSS and JS files in index.html and the images within components? For eg. <img src="/assets/img/image.jpg"> OR <img src="/src/assets/img/image.jpg">

Thanks a lot for your time.

anonym
  • 4,460
  • 12
  • 45
  • 75
  • 1
    If you are just learning, I'd recommend following this tutorial(actually, its a book) on React. https://survivejs.com/webpack/introduction/ Webpack is a complex but awesome tool, give it a couple of days to sink in. – Nerve Jul 11 '17 at 06:47

1 Answers1

1

  1. No in your case it won't be included in bundle.js because you are not using npm modules for bootstrap and jquery. You can try this way to include in your dev dependencies :

    npm i -D bootstrap jquery

  2. You don't need to copy assets to the dist folder. Webpack is a module bundler and everything you reference in your files will be included. You just need to specify a loader for that.For your reference :

    How to copy static files to build directory with Webpack?

  3. I don't really get the question but ofcourse you will set the path for css in the index.html for css you just have to import it with relative path. For example :

    import App from './App'

Debabrata Mohanta
  • 635
  • 7
  • 20
  • Thanks, that's good info. What about my images? Does webpack bundle images into `bundle.js` too? – anonym Jul 11 '17 at 06:44
  • No webpack only bundles the js files.It just load the type of file mentioned in loaders example svg,css,etc . However you can leverage the build system to create sprite image for all the images or concatenate and uglify all your css . – Debabrata Mohanta Jul 11 '17 at 06:52