0.0.40 • Published 7 years ago

mwb v0.0.40

Weekly downloads
2
License
MIT
Repository
-
Last release
7 years ago

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
0.0.40

7 years ago

0.0.39

7 years ago

0.0.38

7 years ago

0.0.37

7 years ago

0.0.36

7 years ago

0.0.35

8 years ago

0.0.34

8 years ago

0.0.33

8 years ago

0.0.32

8 years ago

0.0.31

8 years ago

0.0.30

8 years ago

0.0.29

9 years ago

0.0.28

9 years ago

0.0.27

9 years ago

0.0.26

9 years ago

0.0.25

9 years ago

0.0.24

9 years ago

0.0.23

9 years ago

0.0.22

9 years ago

0.0.21

9 years ago

0.0.20

9 years ago

0.0.19

9 years ago

0.0.18

9 years ago

0.0.17

9 years ago

0.0.16

9 years ago

0.0.15

9 years ago

0.0.14

9 years ago

0.0.13

9 years ago

0.0.12

10 years ago

0.0.11

10 years ago

0.0.10

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago