mwb
webpack config to enable client & server hmr development
Last updated a year ago by aunz .
MIT · Original npm · Tarball · package.json
$ cnpm install mwb 
SYNC missed versions from official npm registry.

Minimalist webpack 4 config boilerplate for client and server

  • Hot loading for both client & server
  • Assets minification and chunk splitting for production
  • Postcss, autoprefixer
  • Client files hashing for caching
  • Focus on your app logics, leave the build tools to others

To start

npm i -D mwb
npm i -D webpack # it requires webpack

Then copy the mwb.js insides the node_modules\mwb into your node project root. You can change its name to anything you like.

node mwb # start live coding & editing in development mode
node mwb --mode production # build the app for production

node mwb --hot.server # enable HMR in server

Tested in node 10+, npm 6+


Directory structure:

  App
   ├─ /dist/
   |    ├─ /public/
   |    └─ /server/
   └─ /src/ 
       ├─ /client/
       |    ├─ entry.js
       |    ├─ entry.test.js
       |    └─ entry.node.test.js
       ├─ /server/
       |    ├─ entry.js
       |    └─ entry.test.js
       └─ /public/
             └─ favicon.ico

To create the directory structure as above, run:

node mwb --init

Don't worry, it won't override anything


How it works:

  • Place the mwb.js in your root folder, you can change the name to anything you like
  • Create a directory structure as above
  • The mwb.js actually produces webpack config objects (client config and server config) and run webpack compilers internally. It reads the src/client/entry.js, processes through webpack and produces a file at dist/public/client.js. The same applies to src/server/entry.js with an output at dist/server/server.js
  • During devlopment mode, when you edit the files in the source folder, webpack re-compiles them. Hot module replacement is enabled by default for client, and can be turned on for server with node mwb.js --mode development --hot.server. --mode development is the default, you don't need to specify it.
  • You can also add entry.test.js in either client or server and run them as node mwb --env.TEST. The entry.test.js will be processed by webpack with all the loaders and plugins.
  • The public folder is for your static assets. All the files and folders in it will be copied to the dist/public.

Dependencies

You will need these if you have not istalled them

  npm i -D webpack
  npm i -D babel-loader file-loader url-loader raw-loader null-loader
  npm i -D style-loader css-loader postcss-loader postcss-import postcss-url postcss-preset-env cssnano
  npm i -D @babel/core @babel/preset-env @babel/preset-react babel-plugin-transform-react-remove-prop-types babel-plugin-graphql-tag
  npm i -D html-webpack-plugin mini-css-extract-plugin offline-plugin
  npm i -D webpack-hot-middleware
  npm i -D eslint babel-eslint # optional 

  # or run, this will install the required dependencies and create the directory structure
  node mwb --init

Details

Included loaders:

  • babel-loader with presets (env, react-app), plugins (transform-runtime) and cacheDirectory (true).
  • css!postcss loaders for css with autoprefixer, postcss-import, poscss-preset-env
  • To use css module, name your style files as [file].local.css. The suffix .local.css switches on the { option: { module: true } } in css-loader
  • url-loader for everything else with limit=8192 & name=[name]_[hash:base64:5].[ext]

Style sheet is extracted by mini-css-extract-plugin in the client for production mode. During development mode, style-loader is used. On server, null-loader is applied to all css.

Included plugins

  • mini-css-extract-plugin for production mode
  • html-webpack-plugin
  • webpack.DefinePlugin({ 'process.env.APP_ENV': '"server"' })for server
  • webpack.DefinePlugin({ 'process.env.APP_ENV': '"client"' }) for clients
  • webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }) in development mode
  • webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }) in production mode to aid dead code elimination
  • Add more env by node mwb --env.A apple --env.B banana --env.C cherry, these will produce webpack.DefinePlugin({ 'process.env.A': '"apple"' }) and so on
  • offline-plugin with minification turned on in production mode for client

Server

  • This is optional, in the src/server/entry.js you will need some kind of server logic to serve client files, see example at the src/server/entry.js. Or you can create an express server using node mwb --init
  • All native modules and assets.json are excluded (treated as external) by webpack using /^[@a-z][a-z/\.\-0-9]*$/i, and /^.?assets\.json$/i in server, this speeds up build time

Changing the entry file

By default, it reads src/client/entry.js and src/server/entry.js. If you need to change it, provide --entry.client or --entry.server e.g node mwb --entry.client "./other_src/entry.js"

Running tests

  • node mwb --env.TEST webpack will read entry files from src/client/entry.test.js and src/server/entry.test.js
  • node mwb --env.TEST --env.TEST_CID webpack will read entry files from src/client/entry.test.js and src/client/entry.node.test.js and src/server/entry.test.js. The entry.test.js will be run in the web context, while the entry.node.test.js will be run in the Node context (useful for integration test using Puppeteer or similar tests)

Misc

  • All codes wrapped insides if (process.env.NODE_ENV !== 'production') {} or if (process.env.NODE_ENV == 'development') {} or if(module.hot) {} are removed for production
  • Source map is set to cheap-module-eval-source-map for development
    • Source map is set to false in production mode for client, so NO source map
    • Source map is set to source-map in production mode for server, check out source-map-support
  • client_[chunkhash:7].js vendor_[chunkhash:7].js & style_[contenthash:7].css in production mode for caching
  • ~ is aliased to the src directory. For example, import '~/server/myModule' === ./src/server/myModule

Current Tags

  • 0.0.40                                ...           latest (a year ago)

39 Versions

  • 0.0.40                                ...           a year ago
  • 0.0.39                                ...           a year ago
  • 0.0.38                                ...           a year ago
  • 0.0.37                                ...           a year ago
  • 0.0.36                                ...           2 years ago
  • 0.0.35                                ...           2 years ago
  • 0.0.34                                ...           2 years ago
  • 0.0.33                                ...           2 years ago
  • 0.0.32                                ...           2 years ago
  • 0.0.31                                ...           2 years ago
  • 0.0.30                                ...           3 years ago
  • 0.0.29                                ...           3 years ago
  • 0.0.28                                ...           3 years ago
  • 0.0.27                                ...           3 years ago
  • 0.0.26                                ...           3 years ago
  • 0.0.25                                ...           3 years ago
  • 0.0.24                                ...           3 years ago
  • 0.0.23                                ...           3 years ago
  • 0.0.22                                ...           3 years ago
  • 0.0.21                                ...           3 years ago
  • 0.0.20                                ...           3 years ago
  • 0.0.19                                ...           3 years ago
  • 0.0.18                                ...           3 years ago
  • 0.0.17                                ...           3 years ago
  • 0.0.16                                ...           4 years ago
  • 0.0.15                                ...           4 years ago
  • 0.0.14                                ...           4 years ago
  • 0.0.13                                ...           4 years ago
  • 0.0.12                                ...           4 years ago
  • 0.0.11                                ...           4 years ago
  • 0.0.10                                ...           4 years ago
  • 0.0.9                                ...           4 years ago
  • 0.0.8                                ...           4 years ago
  • 0.0.7                                ...           4 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 65
Dependencies (0)
None
Dev Dependencies (24)
Dependents (2)

Copyright 2014 - 2016 © taobao.org |