title: How to bundle a react component with assets ready to publish on npm?
body: <p>This has been asked before but a few things still confuse me.</p>
  
  <h1>Questions</h1>
  
  <p>I am creating a component which will be consumed by my create-react-app template. Therefore the component will be built twice. Once on creating the component and once by create-react-app. This works fine for my js but for css I'm not sure how I should bundle my css? </p>
  
  <ol>
  <li><p>Should I use css-loader/style-loader with uglification and minimisation in my component? But this will then put a separate css style tag for each component I add to create-react-app. </p></li>
  <li><p>Should I use inline styles with my react components so there is no style sheets at all? <strong>Can the react inline styles do everything a normal css style sheet can do?</strong></p></li>
  <li><p>Should I just add a require(my.css) to my published component which is ignored by the first web pack build but then will be processed by create-react-app? <strong>How do I do this. I tried the ignore plugin with web pack but this just removes the require? How do I keep it i the code but not process it with webpack</strong></p></li>
  </ol>
  
  <p>This next thing which confuses me is installing the component. It seems when I do: </p>
  
  <pre><code>npm install --save @mortonprod/react-product-component
  </code></pre>
  
  <p>It will pull all my files and then create the dist folder on my computer. </p>
  
  <ol>
  <li><p>How does npm know how to build my package? Does it default to the build script in package.json?</p></li>
  <li><p>Should I build my component this way? Should I not just publish my dist folder so npm install just pulls the dist directory? </p></li>
  <li><p>Does npm pull directly from GitHub or does it have it's own repository? </p></li>
  </ol>
  
  <p><strong>Thanks in advance and my setup is below</strong></p>
  
  <h1>Setup</h1>
  
  <p>So I have a react component which contains css/svg. I build it with webpack using the config:</p>
  
  <pre><code>'use strict';
  const webpack = require('webpack');
  const path = require('path');
  module.exports =  {
    entry: {
          bundle: "./product.js"
      },
  //  plugins: ["transform-react-jsx"],
    module:{
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader'
      },
          { test: /\.css$/, loader: 'css-loader' },
      {
          test: /\.svg$/,
          loader: 'svg-inline-loader'
      }
    ]
    },
      output:{
      libraryTarget: 'umd',
      filename: 'index.js',   
          path: path.resolve(__dirname, 'dist')
      },
    resolve: {
      extensions: ['.js', '.jsx']
    },
  } 
  </code></pre>
  
  <p>I also can publish it using my package.json</p>
  
  <pre><code>{
    "name": "@mortonprod/react-product-component",
    "version": "1.2.0",
    "description": "This is a small react component to display product information",
    "main": "dist/index.js",
    "scripts": {
      "test": "npm run tests",
      "build": "./node_modules/.bin/webpack --progress"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/mortonprod/react-product-component.git"
    },
    "keywords": [
      "react"
    ],
    "author": "Alexander Morton",
    "license": "MIT",
    "bugs": {
      "url": "https://github.com/mortonprod/react-product-component/issues"
    },
    "homepage": "https://github.com/mortonprod/react-product-component#readme",
    "dependencies": {
      "react": "^15.6.1",
      "react-router-dom": "^4.1.2"
    },
    "devDependencies": {
      "babel-core": "^6.25.0",
      "babel-loader": "^7.1.1",
      "babel-plugin-transform-react-jsx": "^6.24.1",
      "babel-preset-env": "^1.6.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "css-loader": "^0.28.4",
      "style-loader": "^0.18.2",
      "svg-inline-loader": "^0.8.0",
      "webpack": "^3.4.1"
    }
  }
  </code></pre>
  
  <p>My component</p>
  
  <pre><code>import React from 'react';
  import {Link} from 'react-router-dom'
  import "./product.css";
  /**
      This is a product. It is composed of images which shows the product and information about that product. 
      Product information is passed to component to render.
      The main function of this component is to correctly render variable size images. We want to be able to display variables aspect ratio photos.
      All photos must have the same height or they will leave large gaps when grouped together. They also must be about 300px width for mobile.
      The product component must also have padding which is can expand into and centre into parent div.
      To achieve these needs set padding to 30px for product to expand into and margin auto by default. If device width is less than 500px then reduce height of
      image to 250px with max-width 300(This might leave some images with broken aspect ratio).
      -------------------------
      Must set product css to 100% width/height otherwise largest image will set the height of all other image. Strange?
      @function
  */
  export default function Product(props){
      let price = null;
      if(props.price !== null &amp;&amp; props.price !== ""){
          price = (
              &lt;Link to={{
                      pathname: '/buy',
                      state: { 
                          title: props.title,
                          description:props.description,
                          img:props.src,
                          price:props.price,
                          info:props.info 
                      }
                  }} 
                  className={"product__link"} &gt;
                  &lt;span&gt; 
                      {props.price} 
                  &lt;/span&gt; 
              &lt;/Link&gt;
          )
      }
  
      return (
          &lt;div className={"product"}&gt;
              &lt;img src={props.src} className="product__image" alt="logo" /&gt;
              &lt;div className={"product__info"}&gt;
                   &lt;h1 className={"product__name"}&gt;{props.title} &lt;/h1&gt;
                   &lt;h4 className="product__description"&gt;{props.description} &lt;/h4&gt;
                   &lt;p className="product__descriptionLong"&gt;{props.info.description} &lt;/p&gt;
                   {price}
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  Product.defaultProps={
      title:"Test title",
      description:"This is the test description",
      img:null,
      price:"test price",
      info:{size:"test size",weight:"test weight"}
  }
  </code></pre>