build: add standalone web dev mod

wewoor · wewoor · commit 07d1260cb491 · 2020-10-20T14:02:54.000+08:00
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,56 +1,11 @@
 const path = require("path");
-const webpack = require("webpack");
+const { merge } = require('webpack-merge');
+const baseConf = require('../build/webpack.base');
 
 module.exports = {
   stories: ["../stories/**/*.stories.tsx"],
   addons: ["@storybook/addon-actions", "@storybook/addon-links"],
   webpackFinal: async (config) => {
-    config.module.rules.push(
-      {
-        test: /\.(ts|tsx)$/,
-        exclude: [
-          path.resolve(__dirname, "../node_modules")
-        ],
-        use: [
-          {
-            loader: require.resolve("ts-loader"),
-          },
-          // Optional
-          {
-            loader: require.resolve("react-docgen-typescript-loader"),
-          },
-        ],
-      },
-      {
-        test: /\.worker\.js$/,
-        use: { loader: "worker-loader" },
-      },
-      {
-        test: /\.scss$/,
-        use: ["style-loader", "css-loader", "sass-loader"],
-        include: path.resolve(__dirname, "../"),
-      }
-    );
-
-    config.node = {
-      fs: "empty",
-      module: "empty",
-    };
-
-    config.plugins.push(
-      new webpack.ContextReplacementPlugin(
-        /monaco-editor(\\|\/)esm(\\|\/)vs(\\|\/)editor(\\|\/)common(\\|\/)services/,
-        __dirname
-      )
-    );
-
-    config.resolve.alias = {
-      "mo": path.resolve(__dirname, "../src"),
-      "@stories": path.resolve(__dirname, "../stories"),
-    };
-    config.resolve.extensions.push(".ts", ".tsx", ".js", ".jsx", ".json");
-    config.devtool = "cheap-module-eval-source-map";
-
-    return config;
+    return merge(config, baseConf);
   },
 };
diff --git a/build/web.js b/build/web.js
@@ -0,0 +1,34 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const webpackConf = require('./webpack.base');
+
+module.exports = function(env) {
+    return merge(webpackConf, {
+        mode: 'development',
+        devServer: {
+            progress: false,
+            hot: true,
+        },
+        entry: {
+            'app': path.resolve(__dirname, './web/app.js'),
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.css$/,
+                    use: ['style-loader', 'css-loader'],
+                },
+                {
+                    test: /\.(jpg|png|gif|eot|woff|svg|ttf|woff2|gif|appcache|webp)(\?|$)/,
+                    use: ['file-loader'],
+                },
+            ],
+        },
+        plugins: [
+            new HtmlWebPackPlugin({
+                template: path.resolve(__dirname, './web/index.html'),
+            }),
+        ].filter(Boolean),
+    });
+};
diff --git a/build/web/app.js b/build/web/app.js
@@ -0,0 +1,14 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Workbench } from 'mo/workbench';
+import { MoleculeProvider } from 'mo/provider/molecule';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <MoleculeProvider>
+            <Workbench />
+        </MoleculeProvider>
+    </React.StrictMode>,
+    document.getElementById('root'),
+);
diff --git a/build/web/index.html b/build/web/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Molecule Sample</title>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>
diff --git a/build/webpack.base.js b/build/webpack.base.js
@@ -0,0 +1,44 @@
+const path = require('path');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+module.exports = {
+    devtool: 'cheap-module-eval-source-map',
+    resolve: {
+        extensions: ['.js', '.jsx', '.tsx', '.ts'],
+        alias: {
+            'mo': path.resolve(__dirname, '../src'),
+            '@stories': path.resolve(__dirname, '../stories'),
+        },
+    },
+    output: {
+        globalObject: 'self',
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, '../dist'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx|tsx|ts)$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: require.resolve('ts-loader'),
+                    },
+                    // Optional
+                    {
+                        loader: require.resolve('react-docgen-typescript-loader'),
+                    },
+                ],
+            },
+            {
+                test: /\.scss$/,
+                use: ['style-loader', 'css-loader', 'sass-loader'],
+            },
+        ],
+    },
+    plugins: [
+        new MonacoWebpackPlugin({
+            languages: ['html', 'typescript', 'javascript', 'css'],
+        }),
+    ],
+};
