1.0.0 • Published 5 years ago
webpack4-config-for-react v1.0.0
webpack4-config-for-react
webpack4-config-for-react is designed for different kinds of web app. It is based on create-react-app, but it's more flexible.
Installation
$ npx install-peerdeps -D webpack4-config-for-reactUsage
const createReactConfig = require('webpack4-config-for-react')
const config = createReactConfig({
mode = process.env.NODE_ENV
})API
createReactConfig.options:
- webpack internal config
| name | type | default | description |
|---|---|---|---|
| mode | string | 'development' | see webpack mode |
| publicPath | string | './' | see webpack publicPath |
- app path config
| name | type | default | description |
|---|---|---|---|
| appRoot | string | '.' | the application's root dir |
| appSrc | string | './src' | source code dir |
| appEntry | string | './src/index.js' | source code entry file |
| appBuild | string | './dist' | output dir after bundling |
| appPkgJson | string | './package.json' | package.json file path |
| appNodeModules | string | './node_modules' | dependency's dir |
| appHtml | string | './public/index.html' | the application's html file |
| appTsConfig | string | './tsconfig.json' | tsconfig.json file path |
| swSrc | string | './src/service-worker' | service worker dir |
- feature config
| name | type | default | description |
|---|---|---|---|
| useReactRefresh | boolean | false | whether or not use @pmmmwh/react-refresh-webpack-plugin |
| useSourceMap | boolean | false | whether or not use sourceMap |
| useTypescript | boolean | false | whether or not use typescript |
| useTsCheck | boolean | false | whether or not check ts type |
| useInlineRuntimeChunk | boolean | true | whether or not use react-dev-utils/InlineChunkHtmlPlugin |
- loader & plugin config
| name | type | default | description |
|---|---|---|---|
| imageInlineSizeLimit | string | '10000' | image inline size limit, see url-loader limit |
| interpolateHtmlPlugin | object | { PUBLIC_URL: './' } | new InterpolateHtmlPlugin(HtmlWebpackPlugin, interpolateHtmlPlugin) |
| definePlugin | object | {} | DefinePlugin params |
| forkTsCheckerWebpackPlugin | object | {reportFiles: ['../**/src/**/*.{ts,tsx}','**/src/**/*.{ts,tsx}','!**/src/**/__tests__/**','!**/src/**/?(*.)(spec\|test).*',]} | react-dev-utils/ForkTsCheckerWebpackPlugin params, only valid when useTypescript and useTsCheck are enabled |
- other
| name | type | default | description |
|---|---|---|---|
| appName | string | 'app' | the application's name |
Caveats
You have to set process.env.NODE_ENV by yourself, cause babel needs process.env.NODE_ENV not undefined.
1.0.0
5 years ago