webpack-create-react-file

Webpack create react file

The plugin automatically create component file (js or jsx) and style file with cssmodule

Installation

npm install webpack-create-react-file --save-dev

webpack.config.js

const path = require('path');
const WebpackCreateReactFile = require('webpack-create-react-file');
module.exports = {
  ...
  plugins: [
    new WebpackCreateReactFile({
      path: path.resolve(__dirname, './src/components/'),
      language: 'jsx',
      beauty: '  ',
      style: {
        filename: 'style.scss',
        objectCssModule: 'styles'
      }
    })
  ]
  ...
}

Example auto create react file

Create folder: foo
Auto create file: foo.jsx

foo
└── foo.jsx

foo.jsx CONTENT BASIC:

import React, {Component} from 'react';
import styles from './style.scss';

class ComponentName extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div></div>
    )
  }
}
export default ComponentName;

Example auto create style file use cssmodule

Options
style: {
  filename: 'style.scss', // filename style component
  objectCssModule: 'styles'
}

Write class with cssmodule

import React, {Component} from 'react';
import styles from './style.scss';

class ComponentName extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <div className={styles.component}>
        <h2 class={styles.title}></h2>
      </div>
    )
  }
}
export default ComponentName;

style.scss
Automatically create file style:

// component
.component {

}

// style
.style {

}