mwb v0.0.40
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 withautoprefixer
,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 modehtml-webpack-plugin
webpack.DefinePlugin({ 'process.env.APP_ENV': '"server"' })
for serverwebpack.DefinePlugin({ 'process.env.APP_ENV': '"client"' })
for clientswebpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' })
in development modewebpack.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 producewebpack.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 fromsrc/client/entry.test.js
andsrc/server/entry.test.js
node mwb --env.TEST --env.TEST_CID
webpack will read entry files fromsrc/client/entry.test.js
andsrc/client/entry.node.test.js
andsrc/server/entry.test.js
. Theentry.test.js
will be run in the web context, while theentry.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') {}
orif (process.env.NODE_ENV == 'development') {}
orif(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
- Source map is set to
client_[chunkhash:7].js
vendor_[chunkhash:7].js
&style_[contenthash:7].css
in production mode for caching~
is aliased to thesrc
directory. For example,import '~/server/myModule'
===./src/server/myModule
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago