SodhanaLibrary

First of all we should now how module import works, I will give short description here. You can learn about modules by reading this article.  Now observe below screenshot.

Click here to download Code

To Run Example Code

execute below commands

npm install
webpack

now you can see dist folder with library files

React Library

We need to create react-library. It should not include any code from React, React-DOM. Whatever the components we develop, those components has to be available to import in other projects. Lets create small project 

Project

Observe below project structure. dist folder contains all JS and CSS library files. Component1.js, Component2.js  are the react component files.  index.js exports these components to create library. styles.scss contains styles in sass format

Component1.js

import React from 'react'

class Component extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
         Component 1
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;

Component2.js

import React from 'react'

class Component extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
         Component 2
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;

index.js

This file exports all components which has to be available for importing. Styles included in this file will be extracted using textExtractor webpack plugin, will be written to library CSS files

export Component1 from './Component1'
export Component2 from './Component2'

import styles from './styles.scss'

Webpack Configuration

Now we have to configure webpack.config.js.  Lets see what things we need to do with webpack

1. Should convert ES6 code to ES5. (we can use babel to convert es6 to es5)
2. Should generate library JS file without the code of React, React-dom (should include React, React-dom as externals)
3. Should extract CSS, create minified CSS file (have to use TextExtracterPlugin)
4. Should generate minified JS file along with react-library file (have to use Uglify plugin)

webpack.config.js

Observe below code. Here I used plugins as specified

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");

module.exports = {
  entry : {
    'react-library':'./src/index.js',
    'react-library.min':'./src/index.js'
  },

  output: {
    path: './dist',
    filename: '[name].js',
    library: 'ReactLibrary',
    libraryTarget: 'umd'
  },

  devtool: "source-map",

  externals: [
    {
      'react': {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      }
    },
    {
      'react-dom': {
        root: 'ReactDOM',
        commonjs2: 'react-dom',
        commonjs: 'react-dom',
        amd: 'react-dom'
      }
    }
  ],

  module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['react','es2015','stage-0']
                }
            },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style", "css!sass")
      }
     ]
 },

 plugins: [
    new ExtractTextPlugin("./[name].css"),
    new webpack.optimize.UglifyJsPlugin({
     exclude:['react-library.js'],
     minimize: true,
     compress: { warnings: false }
   })
 ]
};