webpack.config.prod.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. const path = require('path')
  2. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const projectPath = path.resolve(__dirname, '../')
  5. module.exports = {
  6. mode: 'production',
  7. entry: './src/index.js',
  8. output: {
  9. path: path.resolve(__dirname, '../dist'),
  10. filename: '[name]-bundle-[hash:8].js'
  11. },
  12. module: {
  13. rules: [
  14. {
  15. test: /\.js$/,
  16. loader: 'babel-loader',
  17. include: path.resolve(projectPath, 'src'),
  18. exclude: path.resolve(projectPath, "node_modules"),
  19. },
  20. {
  21. test: /\.css$/,
  22. use: [
  23. {
  24. loader: MiniCssExtractPlugin.loader,
  25. options: {
  26. publicPath: '../build/styles'
  27. }
  28. },
  29. {
  30. loader: "css-loader",
  31. options: {
  32. modules: true,
  33. camelCase: true,
  34. localIdentName: '[name]__[local]--[hash:base64:5]'
  35. }
  36. }
  37. ]
  38. }
  39. ]
  40. },
  41. plugins: [
  42. new MiniCssExtractPlugin({
  43. filename: "[name].css",
  44. chunkFilename: "[id].css"
  45. }),
  46. new HtmlWebpackPlugin({
  47. title: 'CSS Modules Demo',
  48. filename: 'index.html',
  49. template: path.resolve(projectPath, 'index.html'),
  50. inject: false
  51. })
  52. ],
  53. }