bcd-react-webpack

Use webpack painless.

examples

- simple

Usage

$3

``shell
npm install --save-dev webpack webpack-cli webpack-dev-server bcd-react-webpack
`

$3

`json
{
"scripts": {
"start": "webpack-dev-server --hot",
"build": "NODE_ENV=production webpack"
}
}
`

$3

create webpack config file webpack.config.js


`js
const createConfig = require('bcd-react-webpack');

const env = process.env.NODE_ENV || 'development';

module.exports = createConfig({
publicPath: env === 'development' ? '/' :
// TODO: online assets url prefix, you should modify this
'https://lesspage.oss-cn-shanghai.aliyuncs.com/'
});
`

$3

`
npm install --dev node-sass sass-loader
`

$3

- add tsconfig.js

`json
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true,
"esModuleInterop": true,
"target": "ES2020",
"jsx": "react"
}
}
`

- install type declaration

`
npm install -D @types/react @types/react-dom @types/prop-types
`

Detail

$3

`
- config/
- webpack.config.js

- src/
- template.html # tempalte file for HtmlWebpackPlugin

- pages/ # deduce webpack entries from pages dir
- index/
- index.js

- design/ # muti entry support
- index.js
- index.html # custom template

- components/ # arbitrarily dir/packages。
- utils/

- package.json
`

We also alias '@' for src dir.

`js
import Avatar from '@/components/Avatar';
// import Avatar from '../../../../components/Avatar';
`

$3

Muti entry pages may slowdown the building in current webpack-dev-server,
use arg --stage for only build specify entry page.

You can also config stage in config for forcing specify this arg in dev and build phase.

`js
module.exports = createConfig({
...,
stage: true
});
`

$3

`json
{
"scripts": {
"start": "webpack-dev-server --hot --config config/webpack.config.js"
}
}
`

`shell
npm run start --stage mypage
`

$3


`js
module.exports = createConfig({
publicPath: env === 'development' ? '/' : './',

devServer: { ... }, // @see https://webpack.js.org/configuration/dev-server/
shouldUseSourceMap: true, // use 'source-map', current default use 'cheap-module-source-map'
extractCss: true,

srcPath: 'src', // source dir
distPath: 'dist', // output dir
assetsDir: { js: 'js/', css: 'css/', media: 'media/' }, // output assets dir
pagesPath: 'pages',

digest: false, // in production env, default to true
swPrecache: false, // disable SWPrecacheWebpackPlugin
manifest: false, // disable manifest file
manifest: { fileName }, // custom manifest filename
bundleAnalyzer: false, // disable analyzer plugin
});
``