diff --git a/.storybook/main.js b/.storybook/main.js
index bb2639d96..5a9251ad9 100644
--- 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
index e69de29bb..aa4111d75 100644
--- 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
new file mode 100644
index 000000000..0e493b871
--- /dev/null
+++ 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(
+
+
+
+
+ ,
+ document.getElementById('root'),
+);
diff --git a/build/web/index.html b/build/web/index.html
new file mode 100644
index 000000000..4a70fe932
--- /dev/null
+++ b/build/web/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+ Molecule Sample
+
+
+
+
+
\ No newline at end of file
diff --git a/build/webpack.base.js b/build/webpack.base.js
new file mode 100644
index 000000000..4ee416dcf
--- /dev/null
+++ 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'],
+ }),
+ ],
+};