Nibbling Pastry Monster


    1.7.3 • Public • Published

    Welcome to react-webpack-template

    This repository holds the base template for the current version of generator-react-webpack. It can also be used as the prototype for newly generated projects.

    Build Status Amount of Downloads per month Dependency Tracker Dependency Tracker


    The following features are currently included:

    • Webpack and Webpack-Dev-Server, including hot-loader
    • Babel and JSX
    • Mocha Unit tests
    • esLint Support
    • No dependency on grunt, gulp or the next hot taskrunner!
    • Support for environment-specific configuration files
    • Support for code coverage via isparta-loader

    What is it for?

    This template can be used directly for the creation of new projects. When using it like this, make sure to not install it via npm but download it directly. The template is (nearly) useless for itself when downloaded via npm!

    Basically, it is currently only used as the base template of generator-react-webpack.

    Using it

    The template uses webpack as build tool to serve files and run tests. The following commands are available:

    # Start for development 
    npm start # or 
    npm run serve
    # Start the dev-server with the dist version 
    npm run serve:dist
    # Just build the dist version and copy static files 
    npm run dist
    # Run unit tests 
    npm test
    # Run the unit tests continuously (repeat the test when code changes are saved) 
    npm run test:watch
    # Lint all files in src (also automatically done AFTER tests are run) 
    npm run lint
    # Clean up the dist directory 
    npm run clean
    # Just copy the static assets 
    npm run copy

    You can also use your globally installed version of webpack like this:

    # Build or run the dev version: 
    webpack --env=dev
    webpack-dev-server --env=dev
    # Build or run the dist version 
    webpack --env=dist
    webpack-dev-server --env=dist

    Including third party modules (e.g. from npm)

    The default setting for the webpack configuration is to only include the src and test directories. If you want to add any modules from npm, you have to add them in cfg/base.js. One example is:

    // Somewhere on top of the file:
    let npmBase = path.join(__dirname, '../node_modules');
    let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ];

    All entries added to the additionalPaths array will be appended to the include path for babel.

    A note on unit testing

    When running tests, coverage information (provided via Istanbul) will also be written into the coverage/ directory. If you do not need this, just comment out or remove the section in karma.conf like this:

    /* do not use coverage reporting!
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'

    Also, you should adjust your webpack test configuration (located in cfg/test.js) to reflect this:

    /* Uncomment this to prevent loading via isparta
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      include: [
        path.join(__dirname, '/../src')
      loader: 'isparta'


    react-webpack-template is available under MIT-License and can therefore be used in any project free of charge.



    npm i react-webpack-template

    DownloadsWeekly Downloads






    Last publish


    • sthzg
    • weblogixx