webpack.config.ts 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import path from 'path';
  2. import webpack from 'webpack';
  3. // tslint:disable-next-line:no-var-requires
  4. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5. const autoprefixer = require('autoprefixer');
  6. const TerserPlugin = require('terser-webpack-plugin');
  7. const config: webpack.Configuration = {
  8. mode: 'production',
  9. entry: {
  10. main: './assets/scripts/main.ts',
  11. },
  12. output: {
  13. publicPath: '/',
  14. path: path.resolve(__dirname, 'static'),
  15. filename: '[name].js',
  16. },
  17. resolve: {
  18. extensions: ['.ts', '.js'],
  19. },
  20. module: {
  21. rules: [
  22. {
  23. test: /\.tsx?$/,
  24. loader: 'ts-loader',
  25. options: {
  26. compilerOptions: {
  27. module: 'ES2020',
  28. },
  29. },
  30. },
  31. {
  32. test: /\.scss$/,
  33. use: [
  34. {
  35. loader: MiniCssExtractPlugin.loader,
  36. },
  37. { loader: 'css-loader', options: { importLoaders: 1 } },
  38. {
  39. loader: 'postcss-loader',
  40. },
  41. {
  42. loader: 'sass-loader',
  43. },
  44. ],
  45. },
  46. ],
  47. },
  48. plugins: [
  49. new MiniCssExtractPlugin({
  50. // Options similar to the same options in webpackOptions.output
  51. // both options are optional
  52. filename: '[name].css',
  53. chunkFilename: '[id].css',
  54. }),
  55. ],
  56. devtool: 'source-map',
  57. optimization: {
  58. usedExports: true,
  59. minimize: true,
  60. minimizer: [
  61. new TerserPlugin({
  62. terserOptions: {
  63. format: {
  64. comments: false,
  65. },
  66. },
  67. extractComments: false,
  68. }),
  69. ],
  70. },
  71. };
  72. export default config;