1const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); 3const path = require('path'); 4 5const mode = process.env.NODE_ENV || 'development'; 6const prod = mode === 'production'; 7 8module.exports = { 9 entry: { 10 bundle: ['./src/main.js'] 11 }, 12 resolve: { 13 alias: { 14 svelte: path.resolve('node_modules', 'svelte'), 15 "@mermaid": 'mermaid' 16 // "@mermaid": '@mermaid-js/mermaid' 17 }, 18 extensions: ['.mjs', '.js', '.svelte', '.ttf'], 19 mainFields: ['svelte', 'browser', 'module', 'main'] 20 }, 21 output: { 22 path: __dirname + '/docs', 23 filename: '[name].js', 24 chunkFilename: '[name].[id].js' 25 }, 26 module: { 27 rules: [ 28 { 29 test: /\.svelte$/, 30 use: { 31 loader: 'svelte-loader', 32 options: { 33 emitCss: true, 34 hotReload: true 35 } 36 } 37 }, 38 { 39 test: /\.css$/, 40 use: [ 41 /** 42 * MiniCssExtractPlugin doesn't support HMR. 43 * For developing, use 'style-loader' instead. 44 * */ 45 prod ? MiniCssExtractPlugin.loader : 'style-loader', 46 'css-loader' 47 ] 48 }, 49 { 50 test: /\.ttf$/, 51 use: [ 52 { 53 loader: 'file-loader', 54 options: { 55 name: '[name].[ext]' 56 }, 57 }, 58 ], 59 } 60 ] 61 }, 62 mode, 63 plugins: [ 64 new MiniCssExtractPlugin({ 65 filename: '[name].css' 66 }), 67 new MonacoWebpackPlugin({ 68 languages: ['json'], 69 features: ['!referenceSearch'] 70 }) 71 ], 72 devtool: prod ? false: 'source-map' 73}; 74