bcd-react-webpack

bcd-react-webpack

Use webpack painless.

examples

• simple

Usage

1. install

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

2. update package.json

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

3. create webpack config file

create webpack config file webpack.config.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/'
});

4. add sass support

npm install --dev node-sass sass-loader

5. add typescript support

• add tsconfig.js

{
  "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

1. project structure

- 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.

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

2. stage

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.

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

in package.json

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

npm run start --stage mypage

3. custom config

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
});