<div align="center"> <h1>Webpack create react file</h1> <p>The plugin automatically create component file (js or jsx) and style file with cssmodule</p> </div>
npm install webpack-create-react-fileThe plugin automatically create component file (js or jsx) and style file with cssmodule
bash
npm install webpack-create-react-file --save-dev
`
webpack.config.js
`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
`js
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(
)
}
}
export default ComponentName;
`
Example auto create style file use cssmodule
`js
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(
)
}
}
export default ComponentName;
style.scss
Automatically create file style:
// component
.component {
}
// style
.style {
}
``