webpack.config.js 1.5 KB

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