webpack.prod.conf.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. // 存放prod配置
  2. const merge = require('webpack-merge');
  3. const baseConfig = require('./webpack.base.conf');
  4. const path = require('path');
  5. const webpack = require('webpack');
  6. // 清除打包多余文件
  7. const CleanWebpackPlugin = require('clean-webpack-plugin');
  8. // 分离css,打包到单独文件
  9. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  10. // 压缩css
  11. const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
  12. module.exports = merge(baseConfig, {
  13. mode: 'production',
  14. devtool: 'source-map',
  15. module: {
  16. rules: [
  17. {
  18. test: /\.css$/,
  19. use: [
  20. MiniCssExtractPlugin.loader,
  21. 'css-loader',
  22. 'postcss-loader'
  23. ]
  24. },
  25. {
  26. test: /\.scss$/,
  27. use: [
  28. {
  29. loader: MiniCssExtractPlugin.loader,
  30. options: {
  31. publicPath: '../'
  32. }
  33. },
  34. 'css-loader',
  35. 'postcss-loader',
  36. 'sass-loader',
  37. ],
  38. }
  39. ]
  40. },
  41. plugins: [
  42. new CleanWebpackPlugin(),
  43. new MiniCssExtractPlugin({
  44. filename: "css/[name].css",
  45. chunkFilename: "css/[id].css"
  46. }),
  47. new webpack.DefinePlugin({
  48. 'process.env': require('../config/prod.env')
  49. }), // 配置请求地址
  50. ]
  51. })