feat: add webpack example

pd4d10 · pd4d10 · commit ab17a22c8769 · 2020-06-11T13:35:09.000+08:00
diff --git a/packages/example-svelte-webpack/.gitignore b/packages/example-svelte-webpack/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+public/bundle.*
+package-lock.json
+yarn.lock
diff --git a/packages/example-svelte-webpack/package.json b/packages/example-svelte-webpack/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "example-svelte-webpack",
+  "version": "1.0.0",
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
+    "mini-css-extract-plugin": "^0.6.0",
+    "serve": "^11.0.0",
+    "style-loader": "^0.23.1",
+    "svelte": "^3.0.0",
+    "svelte-loader": "2.13.3",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "dev": "webpack-dev-server --content-base public"
+  }
+}
diff --git a/packages/example-svelte-webpack/public/favicon.png b/packages/example-svelte-webpack/public/favicon.png
diff --git a/packages/example-svelte-webpack/public/index.html b/packages/example-svelte-webpack/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>Svelte app</title>
+
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link
+      rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css"
+    />
+    <link rel="stylesheet" href="bundle.css" />
+  </head>
+
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/packages/example-svelte-webpack/src/App.svelte b/packages/example-svelte-webpack/src/App.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { onMount } from 'svelte';
+  import { Editor } from 'bytemd';
+  import remarkMath from 'remark-math';
+  import rehypeKatex from 'rehype-katex';
+  import rehypeHighlight from 'rehype-highlight';
+
+  let value = '';
+
+  function handleChange(e) {
+    value = e.detail.value;
+  }
+
+  let plugins = [];
+
+  onMount(async () => {
+    const res = await fetch(
+      'https://raw.githubusercontent.com/bytedance/bytemd/master/packages/example/src/demo.md'
+    );
+    const text = await res.text();
+    value = text;
+  });
+</script>
+
+<style>
+  :global(.bytemd) {
+    height: 90vh !important;
+  }
+</style>
+
+<Editor
+  {value}
+  on:change={(v) => {
+    value = v;
+  }}
+  {plugins}
+  on:change={handleChange} />
diff --git a/packages/example-svelte-webpack/src/main.js b/packages/example-svelte-webpack/src/main.js
@@ -0,0 +1,10 @@
+import 'bytemd/dist/index.css';
+import 'highlight.js/styles/vs.css';
+// import 'github-markdown-css';
+import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;
diff --git a/packages/example-svelte-webpack/webpack.config.js b/packages/example-svelte-webpack/webpack.config.js
@@ -0,0 +1,55 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+const mode = process.env.NODE_ENV || 'development';
+const prod = mode === 'production';
+
+module.exports = {
+  entry: {
+    bundle: ['./src/main.js'],
+  },
+  resolve: {
+    alias: {
+      svelte: path.resolve('../../node_modules/svelte'),
+    },
+    extensions: ['.mjs', '.js', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main'],
+  },
+  output: {
+    path: __dirname + '/public',
+    filename: '[name].js',
+    chunkFilename: '[name].[id].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            emitCss: true,
+            hotReload: true,
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          /**
+           * MiniCssExtractPlugin doesn't support HMR.
+           * For developing, use 'style-loader' instead.
+           * */
+          prod ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+        ],
+      },
+    ],
+  },
+  mode,
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+  devtool: prod ? false : 'source-map',
+};
