webpack.config.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. const path = require('path');
  2. const CleanWebpackPlugin = require("clean-webpack-plugin");
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const autoprefixer = require('autoprefixer');
  6. const outputDirectory = "build";
  7. module.exports = mode => {
  8. console.log('WEBPACK MODE: ', mode);
  9. const PROD = (mode.WEBPACK_BUILD || false)
  10. console.log('EXPORTS PROD: ', PROD);
  11. return {
  12. entry: PROD ? './src/branding.js' : './src/index.js',
  13. output: {
  14. library: 'Branding',
  15. libraryTarget: 'umd',
  16. path: path.resolve(__dirname, outputDirectory),
  17. filename: 'index.js',
  18. },
  19. devtool: 'source-map',
  20. module: {
  21. rules: [
  22. {
  23. test: /\.jsx?$/,
  24. exclude: /node_modules/,
  25. use: [
  26. {
  27. loader: 'babel-loader',
  28. options: {
  29. presets: ['react']
  30. }
  31. }
  32. ]
  33. },
  34. {
  35. test: /\.(sa|sc|c)ss$/,
  36. use: [
  37. MiniCssExtractPlugin.loader,
  38. {
  39. loader: "css-loader",
  40. options: {
  41. modules: false,
  42. sourceMap: true,
  43. importLoader: 2
  44. }
  45. },
  46. "sass-loader"
  47. ]
  48. },
  49. {
  50. test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
  51. use: {
  52. loader: 'file-loader',
  53. query: {
  54. name: '[name].[hash:8].[ext]',
  55. outputPath: './assets/media/',
  56. publicPath: '/'
  57. }
  58. }
  59. },
  60. {
  61. test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
  62. use: {
  63. loader: 'url-loader',
  64. query: {
  65. limit: 10000,
  66. name: '[name].[hash:8].[ext]',
  67. outputPath: './assets/media/',
  68. publicPath: '/'
  69. }
  70. }
  71. }
  72. ]
  73. },
  74. devServer: {
  75. historyApiFallback: true,
  76. port: 3000,
  77. open: true
  78. },
  79. node: {
  80. fs: "empty"
  81. },
  82. stats: {
  83. // One of the two if I remember right
  84. entrypoints: false,
  85. children: false
  86. },
  87. plugins: [
  88. ...(PROD ? [new CleanWebpackPlugin([outputDirectory])] : []),
  89. new HtmlWebpackPlugin({
  90. template: './public/index.html',
  91. }),
  92. new MiniCssExtractPlugin({
  93. filename: "style.css",
  94. chunkFilename: "[name].css"
  95. })
  96. ]
  97. }
  98. };