webpack.config.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  2. const path = require('path');
  3. const { mdsvex } = require('mdsvex')
  4. const mode = process.env.NODE_ENV || 'development';
  5. const prod = mode === 'production';
  6. module.exports = {
  7. entry: {
  8. bundle: ['./src/main.js']
  9. },
  10. resolve: {
  11. alias: {
  12. svelte: path.resolve('node_modules', 'svelte')
  13. },
  14. extensions: ['.mjs', '.js', '.svelte','.svx'],
  15. mainFields: ['svelte', 'browser', 'module', 'main']
  16. },
  17. output: {
  18. path: __dirname + '/public',
  19. filename: 'bundle.js',
  20. chunkFilename: 'bundle.[id].js'
  21. },
  22. module: {
  23. rules: [
  24. {
  25. test: /.(svelte|svx)$/,
  26. use: {
  27. loader: 'svelte-loader',
  28. options: {
  29. emitCss: true,
  30. hotReload: true,
  31. preprocess: mdsvex()
  32. }
  33. }
  34. },
  35. {
  36. test: /\.css$/,
  37. use: [
  38. /**
  39. * MiniCssExtractPlugin doesn't support HMR.
  40. * For developing, use 'style-loader' instead.
  41. * */
  42. prod ? MiniCssExtractPlugin.loader : 'style-loader',
  43. 'css-loader'
  44. ]
  45. }
  46. ]
  47. },
  48. mode,
  49. plugins: [
  50. new MiniCssExtractPlugin({
  51. filename: 'bundle.css'
  52. })
  53. ],
  54. devtool: prod ? false: 'source-map'
  55. };