webpack.config.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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. plugins: [
  80. ...(PROD ? [new CleanWebpackPlugin([outputDirectory])] : []),
  81. new HtmlWebpackPlugin({
  82. template: './public/index.html',
  83. }),
  84. new MiniCssExtractPlugin({
  85. filename: "style.css",
  86. chunkFilename: "[name].css"
  87. })
  88. ]
  89. }
  90. };