webpack.config.split.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. var path = require("path");
  2. var webpack = require('webpack');
  3. var BundleTracker = require('webpack-bundle-tracker');
  4. var MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5. module.exports = {
  6. context: __dirname,
  7. entry: './assets/js/index',
  8. output: {
  9. path: path.resolve('./assets/bundles/'),
  10. filename: "[name].js",
  11. chunkFilename: "[name].js"
  12. },
  13. plugins: [
  14. new MiniCssExtractPlugin(),
  15. new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
  16. ],
  17. module: {
  18. rules: [
  19. // we pass the output from babel loader to react-hot loader
  20. {
  21. test: /\.jsx?$/,
  22. exclude: /node_modules/,
  23. use: {
  24. loader: 'babel-loader',
  25. options: {
  26. presets: ['@babel/preset-react']
  27. }
  28. }
  29. },
  30. { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
  31. ],
  32. },
  33. resolve: {
  34. modules: ['node_modules', 'bower_components'],
  35. extensions: ['.js', '.jsx']
  36. },
  37. optimization: {
  38. splitChunks: {
  39. cacheGroups: {
  40. commons: {
  41. test: /[\\/]node_modules[\\/]/,
  42. name: 'vendors',
  43. chunks: 'all',
  44. enforce: true
  45. }
  46. }
  47. }
  48. }
  49. }