webpack.config.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. const path = require('path');
  2. const webpack = require('webpack')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
  5. const { DEV, DEBUG } = process.env;
  6. process.env.BABEL_ENV = DEV ? 'development' : 'production';
  7. process.env.NODE_ENV = DEV ? 'development' : 'production';
  8. module.exports = {
  9. entry: './src/index.tsx',
  10. output: {
  11. path: path.join(__dirname, '/public'),
  12. filename: 'bundle.js'
  13. },
  14. devServer: {
  15. port: 8080
  16. },
  17. module: {
  18. rules: [
  19. {
  20. test: /\.(js|jsx)$/,
  21. exclude: /node_modules/,
  22. type: 'javascript/auto',
  23. },
  24. {
  25. test: /\.tsx?$/,
  26. use: [
  27. {
  28. loader: 'ts-loader',
  29. options: {
  30. transpileOnly: true,
  31. },
  32. },
  33. ],
  34. exclude: [/node_modules/],
  35. },
  36. {
  37. test: /\.css$/,
  38. use: [ 'style-loader', 'css-loader' ],
  39. },
  40. {
  41. test: /\.(png|jpg|gif|woff|woff2|eot|ttf|otf|svg)$/,
  42. exclude: /node_modules/,
  43. use: ['file-loader'],
  44. },
  45. {
  46. test: /\.md$/,
  47. use: 'raw-loader',
  48. },
  49. {
  50. test: /\.(less)$/,
  51. exclude: /\.module\.less$/,
  52. use: [
  53. {
  54. loader: 'css-loader',
  55. options: {
  56. importLoaders: 2,
  57. sourceMap: !!DEV,
  58. },
  59. },
  60. {
  61. loader: 'less-loader',
  62. options: {
  63. sourceMap: !!DEV,
  64. },
  65. },
  66. ],
  67. },
  68. {
  69. test: /\.(sass|scss)$/,
  70. use: [
  71. {
  72. loader: 'css-loader',
  73. options: {
  74. importLoaders: 2,
  75. sourceMap: !!DEV,
  76. },
  77. },
  78. {
  79. loader: 'sass-loader',
  80. options: {
  81. sourceMap: !!DEV,
  82. },
  83. },
  84. ],
  85. },
  86. ]
  87. },
  88. resolve: {
  89. modules: ['node_modules'],
  90. extensions: [ '.tsx', '.ts', '.js', '.jsx'],
  91. fallback: {
  92. crypto: require.resolve('crypto-browserify'),
  93. stream: require.resolve('stream-browserify'),
  94. path: require.resolve("path-browserify"),
  95. fs: false,
  96. },
  97. plugins: [ new TsconfigPathsPlugin({ configFile: "./tsconfig.json" }) ]
  98. // alias: {
  99. // '@': path.resolve(__dirname, './src/'),
  100. // 'react/jsx-runtime': require.resolve('react/jsx-runtime'),
  101. // },
  102. },
  103. plugins:[
  104. new HtmlWebpackPlugin({
  105. template: path.join(__dirname,'/public/index.html')
  106. }),
  107. new webpack.ProvidePlugin({
  108. Buffer: ['buffer', 'Buffer'],
  109. process: 'process/browser.js',
  110. "React": "react",
  111. }),
  112. ]
  113. }