CODEWITHSUNDEEP
javascriptreactjswebpack
James Donnelly
James Donnelly

Reputation: 128791

Debug-only Pages with Webpack

I'm currently the solo developer on a React web application, but in January a couple of newbies will be joining me. Because of this, I'm wanting to create live documentation for the application where I can embed components and discuss how they're used and what they're used for.

Rather than exporting all of my JavaScript and CSS files out into a separate project, is there any way I can get webpack to only compile these documentation pages when NODE_ENV isn't set to "production"?

My current Webpack config looks like this:

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: [
          'react',
          'es2015',
          'stage-0'
        ],
        plugins: [
          'react-html-attrs',
          'transform-decorators-legacy',
          'transform-class-properties',
          'babel-polyfill'
        ],
      }
    },
    { 
      test: /\.less$/,
      loader: "style!css!autoprefixer!less"
    }
  ]
},
output: {
  path: __dirname + "/dist/",
  filename: "app.min.js"
}

I can only assume I need to place some sort of conditional check within the loaders section, but this is the first time I've used Webpack and I'm not sure exactly what I'd need to change.

Upvotes: 0

Views: 42

Answers (2)

James Donnelly
James Donnelly

Reputation: 128791

In the end I went with adding my documentation folder to the excluded paths only when NODE_ENV isn't equal to "production":

var debug = process.env.NODE_ENV !== "production";

module: {
  loaders: [
    {
      ...
      exclude: new RegExp(
        'node_modeules|bower_components' +
        (!debug ? path.resolve(__dirname, 'documentation') : "")
      )
    }
  ]
}

It's not perfect but it handles my situation nicely.

Upvotes: 0

Mayday
Mayday

Reputation: 5136

I highly recommend you to install and use storybook

It creates you a server completely appart from yours. Where you can test, view, and documment all your components in a really easy way.

Check the Start Guide

I hope it's what you are looking for

Upvotes: 1

Related Questions