webpack.config.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. const path = require('path')
  2. const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
  3. module.exports = ({ config }) => {
  4. // Post CSS loader for sources:
  5. config.module.rules.push({
  6. test: /\.css$/,
  7. include: path.resolve(__dirname, '../packages'),
  8. exclude: /(node_modules)/,
  9. use: [
  10. {
  11. loader: require.resolve('postcss-loader'),
  12. options: {
  13. // Set postcss.config.js config path && ctx
  14. config: {
  15. path: '../postcss.config.js',
  16. },
  17. ident: 'postcss',
  18. plugins: () => [
  19. require('precss'),
  20. require('autoprefixer'),
  21. require('postcss-simple-vars'),
  22. require('postcss-nested'),
  23. require('postcss-import'),
  24. require('postcss-clean')(),
  25. require('postcss-flexbugs-fixes')
  26. ]
  27. }
  28. }
  29. ]
  30. });
  31. // TypeScript loader (via Babel to match polkadot/apps)
  32. config.module.rules.push({
  33. test: /\.(js|ts|tsx)$/,
  34. exclude: /(node_modules)/,
  35. use: [
  36. {
  37. loader: require.resolve('babel-loader'),
  38. options: require('@polkadot/dev/config/babel')
  39. },
  40. ],
  41. });
  42. config.resolve.extensions.push('.js', '.ts', '.tsx');
  43. // TSConfig, uses the same file as packages
  44. config.resolve.plugins = config.resolve.plugins || [];
  45. config.resolve.plugins.push(
  46. new TsconfigPathsPlugin({
  47. configFile: path.resolve(__dirname, '../tsconfig.json'),
  48. })
  49. );
  50. // Stories parser
  51. config.module.rules.push({
  52. test: /\.stories\.tsx?$/,
  53. loaders: [require.resolve('@storybook/source-loader')],
  54. enforce: 'pre',
  55. });
  56. // CSS preprocessors
  57. config.module.rules.push(
  58. {
  59. test: /\.s[ac]ss$/i,
  60. use: [
  61. // Creates `style` nodes from JS strings
  62. 'style-loader',
  63. // Translates CSS into CommonJS
  64. 'css-loader',
  65. // Compiles Sass to CSS
  66. 'sass-loader',
  67. ],
  68. },
  69. {
  70. test: /\.less$/,
  71. loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
  72. }
  73. );
  74. return config;
  75. };