1 | #Minimalist boilerplate for Webpack +/- Express
|
2 |
|
3 | * Hot loading for both **client** & **server**
|
4 | * Code in es2015
|
5 | * CSS module + postcss + autoprefixer
|
6 | * Assets minification for production
|
7 | * Client files hashing for caching
|
8 | * Focus on your app logics, leave the build tools to others
|
9 |
|
10 | ###
|
11 |
|
12 | To start
|
13 | ```shell
|
14 | mkdir myApp
|
15 | cd myApp
|
16 |
|
17 | npm init
|
18 | npm i -D mwb # install (i) mwb as devDependency (-D)
|
19 |
|
20 | npm run mwb init # generate the boilerplate with an express server
|
21 | npm run mwb initMin # generate the boilerplate without a server
|
22 |
|
23 | npm run dev # start live coding & editing in development mode
|
24 |
|
25 | npm run bundle # bundling the app for production
|
26 | ```
|
27 |
|
28 | ##Tested only in node 6+, npm 3+
|
29 |
|
30 | ----------
|
31 | ###Directory structure:
|
32 | ```
|
33 | App
|
34 | ├─ /build/
|
35 | ├─ /tool/
|
36 | └─ /src/
|
37 | ├─ /client/
|
38 | | └─ entry.js
|
39 | ├─ /share/
|
40 | ├─ /server/
|
41 | | ├─ entry.js
|
42 | | ├─ app.js
|
43 | | └─ main.js
|
44 | └─ /public/
|
45 | └─ favicon.ico
|
46 |
|
47 |
|
48 | ```
|
49 | ---
|
50 | ###How it works:
|
51 | * After initiation, an entry.js file is placed in the src/client and src/server folder
|
52 | * All default webpack config files are in the tool folder, you can override these
|
53 | * `npm run dev` uses webpack to compile and watch these files and output them into the build folder -> clientBundle.js and serverBundle.js
|
54 | * serverBundle.js is run automatically and will be served at localhost:3000 (default using express js)
|
55 | * When you edit the files in the source folder, webpack re-compile required files
|
56 | * To enable hot module replacement, add `if (module.hot) {module.hot.accept()}` in your code
|
57 | * Default webpack.config.js is in the tool directory
|
58 |
|
59 | ---
|
60 | ###Details
|
61 |
|
62 | ####Included loaders:
|
63 | * [`babel-loader`](https://github.com/babel/babel-loader) with presets (env, stage-0, react), plugins (transform-runtime) and cacheDirectory (true).
|
64 | * `css!postcss` loaders for css with `autoprefixer`
|
65 | * `url-loader` for everything else with limit=10000 & name=[name]_[hash:7].[ext]
|
66 |
|
67 | Style sheet is **extracted** by `extract-text-webpack-plugin` using `css?minimize&localIdentName=[local]_[hash:7]!postcss` for the initial chunk. The subsequent chunks will be inlined using `style-loader` in the client. `css?module` is applied to files with name xxx.module.css, don't mix global also local css, i.e. in global.css don't do @import './local.module.css'; and vice versa, in local.module.css don't do @import './global.css'. On server, `null-loader` is applied to global.css but `css?module` to local.module.css, the extracted styles.css will be deleted on server when built for production
|
68 |
|
69 | ###Included plugins
|
70 | * `extract-text-webpack-plugin`
|
71 | * `webpack.optimize.AggressiveMergingPlugin`
|
72 | * `webpack.optimize.UglifyJsPlugin({compress: {warnings: false, sourceMap: false, comments: false})`
|
73 | * `webpack.DefinePlugin({ __SERVER__: true })`for server
|
74 | * `webpack.DefinePlugin({ __CLIENT__: true })` for client
|
75 | * `webpack.DefinePlugin({ __CORDOVA__: true })` for cordova app
|
76 | * `webpack.DefinePlugin({ 'process.env.NODE_ENV' : '"development"' })` in development mode
|
77 | * `webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' })` in production mode to aid dead code elimination during minification
|
78 |
|
79 | ### Express server
|
80 | * Listen to 3000 by default or `process.env.PORT`
|
81 | * Use `compression` middleware, then `static('./build/public')` middleware
|
82 | * Server code is hot replaced in development mode, but NOT in production mode
|
83 | * 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
|
84 |
|
85 |
|
86 | ### Misc
|
87 | * All codes wrapped inside `if (process.env.NODE_ENV !== 'production') {}` or `if (process.env.NODE_ENV == 'development') {}` or `if(module.hot) {}` are removed for production
|
88 | * source map is set to `cheap-module-eval-source-map` for development
|
89 | * source map is **NOT** included in production mode
|
90 | * `client_[chunkhash:7].js` `vendor_[chunkhash:7].js` & `styles_[contenthash:7].css` in production mode for caching
|
91 |
|
92 |
|
93 | ### Mongodb
|
94 |
|
95 | ```shell
|
96 | npm run mwb initMongo
|
97 | ```
|
98 | This add the latest mongodb native driver to the app.
|
99 | This also add a file named `mongo.js` into the src/server folder.
|
100 | The mongo.js file contains and export the default connection.
|
101 | In an imported file, use async & await to retrive the connection and db.
|
102 |
|
103 |
|
104 | ### [React & Redux](./doc/react.md)
|
105 |
|
106 | ### [Writing tests](./doc/writingTests.md)
|
107 |
|
108 | ### [Examples](./examples)
|
109 |
|
110 | ### [Cordova integration](./doc/cordova.md)
|
111 |
|
112 | ### Update
|
113 |
|
114 | You can update simply by typing
|
115 | ```shell
|
116 | npm i -D mwb
|
117 | ```
|
118 | The `tool` directory will be renamed to tool.{timestamp} so your modification will still be preserved. A new tool directory will be created with the updated settings. |
\ | No newline at end of file |