webpack.prod.conf.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. output: {
  16. publicPath: './'
  17. },
  18. module: {
  19. rules: [
  20. {
  21. test: /\.(sa|sc|c)ss$/,
  22. use: [
  23. {
  24. loader: MiniCssExtractPlugin.loader,
  25. options: {
  26. publicPath: '../'
  27. }
  28. },
  29. 'css-loader',
  30. 'postcss-loader',
  31. 'sass-loader',
  32. ],
  33. },
  34. {
  35. test: /\.less$/,
  36. use: [
  37. {
  38. loader: MiniCssExtractPlugin.loader,
  39. options: {
  40. publicPath: '../'
  41. }
  42. },
  43. 'css-loader',
  44. 'postcss-loader',
  45. 'less-loader',
  46. ],
  47. }
  48. ]
  49. },
  50. plugins: [
  51. new CleanWebpackPlugin(),
  52. new MiniCssExtractPlugin({
  53. filename: "css/[name].css",
  54. chunkFilename: "css/[id].css"
  55. }),
  56. new webpack.DefinePlugin({
  57. 'process.env': require('../config/prod.env')
  58. }), // 配置请求地址
  59. ]
  60. })