webpack.config.js 1.5 KB

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