Create ReactJS Library Using Webpack

Datetime:2016-08-23 00:24:41          Topic: Webpack  React           Share

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

now open index.html in browser

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

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 }
   })
 ]
};

Package.json

Finally we have to build package.json which contains modules to details to install. 

{
  "name": "react-library",
  "version": "0.1.0",
  "description": "A sample setup to create react library with webpack",
  "main": "dist/react-library.js",
  "scripts": {
    "dist": "webpack"
  },
  "keywords": [
    "ReactJS",
    "WebPack"
  ],
  "author": "Srinivas Dasari",
  "license": "MIT",
  "devDependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "webpack": "^1.13.0",
    "style-loader": "^0.13.1",
    "sass-loader": "^3.2.0",
    "css-loader": "^0.23.1",
    "node-sass":"^3.8.0",
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0"
  }
}

Final Command

Finally run " webpack" command to generate dist folder.  You can run " npm run dist " command also. Once dist folder generated, you can copy this project and paste it in other projects node_modules folder.  Now you can import the components as normal way

import Component1 from 'react-library';
import Component2 from 'react-library';




About List