webpack.config.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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 = {
  8. entry: './src/index.js',
  9. output: {
  10. library: 'Branding',
  11. libraryTarget: 'umd',
  12. path: path.resolve(__dirname, outputDirectory),
  13. filename: 'index.js',
  14. },
  15. devtool: 'source-map',
  16. module: {
  17. rules: [
  18. {
  19. test: /\.jsx?$/,
  20. exclude: /node_modules/,
  21. use: [
  22. {
  23. loader: 'babel-loader',
  24. options: {
  25. presets: ['react']
  26. }
  27. }
  28. ]
  29. },
  30. {
  31. test: /\.(sa|sc|c)ss$/,
  32. use: [
  33. MiniCssExtractPlugin.loader,
  34. {
  35. loader: "css-loader",
  36. options: {
  37. modules: false,
  38. sourceMap: true,
  39. importLoader: 2
  40. }
  41. },
  42. "sass-loader"
  43. ]
  44. },
  45. {
  46. test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
  47. use: {
  48. loader: 'file-loader',
  49. query: {
  50. name: '[name].[hash:8].[ext]',
  51. outputPath: './assets/media/',
  52. publicPath: '/'
  53. }
  54. }
  55. },
  56. {
  57. test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
  58. use: {
  59. loader: 'url-loader',
  60. query: {
  61. limit: 10000,
  62. name: '[name].[hash:8].[ext]',
  63. outputPath: './assets/media/',
  64. publicPath: '/'
  65. }
  66. }
  67. }
  68. ]
  69. },
  70. devServer: {
  71. historyApiFallback: true,
  72. port: 3000,
  73. open: true
  74. },
  75. plugins: [
  76. new CleanWebpackPlugin([outputDirectory]),
  77. new HtmlWebpackPlugin({
  78. template: './public/index.html',
  79. }),
  80. new MiniCssExtractPlugin({
  81. filename: "style.css",
  82. chunkFilename: "[name].css"
  83. })
  84. ]
  85. };