The plugin automatically create component file (js or jsx) and style file with cssmodule
npm install webpack-create-react-file --save-dev
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'
}
})
]
...
}
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 {
}