Clever Geek Handbook

Correct way to batch process a content library?

I'm currently working on a React component library that I want to deliver via npm to as many people as possible. I use webpack

both babel

to package and process my code. However, being brand new to webpack

, I don't know how best to go about packaging my library.

I am planning to have a list of files in a folder src

that will be separate components. How can I package them for people to grab from npm? My guess is to output them separately so that people can import whatever they need. However, I want them to work with ES5 (which I think is consistent babel

with the preset es2015

I installed). My files look like this:

webpack.config.js (several things have been removed for brevity)

var webpack = require('webpack');

module.exports = {
    entry: {
        Component1: __dirname + '/src/Component1.js',
        Component2: __dirname + '/src/Component2.js'
    },
    output: {
            path: __dirname + '/dist',
            filename: '[name].js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                    presets: ['react', 'es2015']
            }
        }]
    }
};

Component1.js (sample component written to demonstrate the example)

import React from 'react';


export default class Component1 extends React.Component {
    render() {
    return React.createElement('p',{className : 'Component1'}, 'This is a test component.');
    }
}

Upon execution webpack

, I end up with a huge file with a lot of overhead codes added by it, but from what I can tell, the code is compiled to ES5, which is my intention. Is this the correct way to do it? Can I avoid the overhead added by webpack?

I tried looking for answers, but the articles I found ( this and this mostly) were a little out of date and / or required me to use some kind of plugin for webpack

which I don't really like it yet. I would like to understand what I should do and why. Thanks in advance!

+3


source to share


2 answers


This is a great question and something that I agree should be covered a lot more. For your specific problem:



+2


source


You can do both modules with vendors.

 

    var webpack = require ('webpack');

    module.exports = {
        entry: {
            Component1: __dirname + '/src/Component1.js',
            Component2: __dirname + '/src/Component2.js',
            vendor: ['react'],
        },
        output: {
                path: __dirname + '/ dist',
                filename: '[name] .js'
        },
        module: {
            loaders: [{
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                        presets: ['react', 'es2015']
                }
            }]
        }
        plugins: [
            new webpack.optimize.CommonsChunkPlugin ({
                name: "vendor",
                minChunks: Infinity
            })
        ]
    };


You get a vendor.js file where will react

more details here https://webpack.github.io/docs/code-splitting.html

+1


source






More articles:


All Articles