refactor(serve): fixed the configuration file to allow customization

kotarella1110 · May 14, 2019 · 5a633e0 · 5a633e0
1 parent 0c1ea8c
commit 5a633e0
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -37,6 +37,13 @@ $ cordova platform add android ios
 $ cordova plugin add cordova-plugin-webpack
 ```
 
+### Create JavaScript file you want to bundle
+
+```shell
+$ mkdir src
+$ cp www/js/index.js src/index.js
+```
+
 ### Create webpack configuration file
 
 **Just create a `webpack.config.js` file in the project root folder!**
@@ -57,9 +64,7 @@ module.exports = {
 };
 ```
 
-Specify _www_ folder for `output.path` property.
-
-### Fix HTML file
+### Fix the HTML file
 
 `www/index.html`:
 
@@ -85,13 +90,62 @@ Processing flow:
 ```
 $ cordova prepare -- --livereload
 $ cordova build -- --livereload
-$ cordova run -- --livereload
+$ cordova run -- -l
 ```
 
 Processing flow:
 
 `webpack compile` > `cordova prepare` > `webpack serve` > `cordova compile`
 
+### Customize webpack configuration
+
+#### Build
+
+If you want to customize `webpack` options, modify `webpack.config.js` file as follows:
+
+```js
+...
+module.exports = {
+  ...
+  mode: 'production'
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'www'),
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin()
+  ]
+  ...
+}
+```
+
+#### Live Reload (Hot Module Replacement)
+
+By defaults:
+
+| option | default |
+|--------|---------|
+| `devServer.contentBase`  | `www` |
+| `devServer.historyApiFallBack` | `true` |
+| `devServer.host` | `0.0.0.0` |
+| `devServer.port` | `8080` |
+
+
+If you want to customize `devServer` options, modify `webpack.config.js` file as follows:
+
+```
+...
+module.exports = {
+  ...
+  devServer: {
+    contentBase: path.join(__dirname, 'public'),
+    host: 'localhost',
+    port: '8000',
+  },
+};
+```
+
 ## TODO
 
 - [x] Bundle with webpack before preparing.

diff --git a/src/webpackServe.ts b/src/webpackServe.ts
@@ -46,27 +46,26 @@ module.exports = (ctx: any) =>
       'webpack.config.js',
     );
     // eslint-disable-next-line global-require, import/no-dynamic-require
-    const webpackConfig: webpack.Configuration = require(webpackConfigPath);
-
-    webpackConfig.mode = 'development';
-
-    webpackConfig.plugins = webpackConfig.plugins || [];
-    // Inject scripts
-    webpackConfig.plugins = [
-      ...webpackConfig.plugins,
-      new WebpackInjectPlugin(() =>
-        fs.readFileSync(
-          path.resolve(__dirname, '../scripts/www/injectCSP.js'),
-          'utf8',
+    const customWebpackConfig: webpack.Configuration = require(webpackConfigPath);
+    const webpackConfig: webpack.Configuration = {
+      ...customWebpackConfig,
+      mode: 'development',
+      plugins: [
+        ...(customWebpackConfig.plugins || []),
+        new WebpackInjectPlugin(() =>
+          fs.readFileSync(
+            path.resolve(__dirname, '../scripts/www/injectCSP.js'),
+            'utf8',
+          ),
         ),
-      ),
-      new WebpackInjectPlugin(() =>
-        fs.readFileSync(
-          path.resolve(__dirname, '../scripts/www/injectCordovaScript.js'),
-          'utf8',
+        new WebpackInjectPlugin(() =>
+          fs.readFileSync(
+            path.resolve(__dirname, '../scripts/www/injectCordovaScript.js'),
+            'utf8',
+          ),
         ),
-      ),
-    ];
+      ],
+    };
 
     const platformWwwPaths = {
       android: path.join(
@@ -76,20 +75,24 @@ module.exports = (ctx: any) =>
       ios: path.join(ctx.opts.projectRoot, 'platforms/ios/platform_www'),
     };
 
+    const customDevServerConfig: WebpackDevServer.Configuration =
+      webpackConfig.devServer || {};
     const devServerConfig: WebpackDevServer.Configuration = {
-      before: app => {
+      contentBase: path.join(ctx.opts.projectRoot, 'www'),
+      historyApiFallback: true,
+      host: '0.0.0.0',
+      port: 8080,
+      ...customDevServerConfig,
+      hot: true,
+      before: (app, server) => {
+        if (customDevServerConfig.before)
+          customDevServerConfig.before(app, server);
         (Object.keys(platformWwwPaths) as Array<
           keyof typeof platformWwwPaths
         >).forEach(platform => {
           app.use(`/${platform}`, express.static(platformWwwPaths[platform]));
         });
       },
-      contentBase: path.join(ctx.opts.projectRoot, 'www'),
-      historyApiFallback: true,
-      hot: true,
-      inline: true,
-      host: '0.0.0.0',
-      port: 8080,
     };
 
     // HMR