webpack.config.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清空打包目录的插件
  4. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  6. const webpack = require('webpack');
  7. const proxyHost = "http://192.168.2.236:5858";
  8. module.exports = {
  9. entry: {
  10. index: path.resolve(__dirname, 'src', 'index.js'),
  11. vendor: 'lodash'// 多个页面所需的公共库文件,防止重复打包带入
  12. },
  13. output: {
  14. publicPath: '/', //这里要放的是静态资源CDN的地址
  15. path: path.resolve(__dirname, 'dist'),
  16. filename: 'js/[name].js'
  17. },
  18. resolve: {
  19. extensions: [".js", ".css", ".json"],
  20. alias: {} //配置别名可以加快webpack查找模块的速度
  21. },
  22. plugins: [// 多入口的html文件用chunks这个参数来区分
  23. new HtmlWebpackPlugin({
  24. title: 'index',
  25. template: path.resolve(__dirname, 'src', 'index.html'),
  26. filename: 'index.html',
  27. chunks: ['index', 'vendor', 'common'],
  28. inject: true,
  29. hash: true, //防止缓存
  30. minify: {
  31. removeAttributeQuotes: true, //压缩 去掉引号
  32. removeComments: true, //移除HTML中的注释
  33. collapseWhitespace: true //删除空白符与换行符
  34. }
  35. }),
  36. new MiniCssExtractPlugin({
  37. filename: 'css/[name].css',
  38. chunkFilename: '[id].css'
  39. }),
  40. new webpack.HotModuleReplacementPlugin(),
  41. new CleanWebpackPlugin()
  42. ],
  43. optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
  44. minimizer: [
  45. new UglifyJsPlugin({
  46. uglifyOptions: {
  47. ie8: true,
  48. compress: {
  49. properties: false,
  50. warnings: false
  51. },
  52. mangle: {
  53. screw_ie8: false,
  54. except: ['e']
  55. },
  56. output: {
  57. beautify: true
  58. },
  59. sourceMap: false
  60. }
  61. })
  62. ],
  63. splitChunks: {
  64. cacheGroups: {
  65. commons: {
  66. chunks: "initial",
  67. name: "common",
  68. minChunks: 2,
  69. maxInitialRequests: 5, // The default limit is too small to showcase the effect
  70. minSize: 0, // This is example is too small to create commons chunks
  71. reuseExistingChunk: true // 可设置是否重用该chunk
  72. }
  73. }
  74. }
  75. },
  76. module: {
  77. rules: [
  78. {
  79. test: /.js$/,
  80. enforce: 'post',
  81. loader: 'es3ify-loader'
  82. },
  83. {
  84. test: /\.m?js$/,
  85. exclude: /(node_modules|bower_components)/,
  86. use: {
  87. loader: 'babel-loader',
  88. options: {
  89. presets:['@babel/preset-env']
  90. }
  91. }
  92. },
  93. {
  94. test: /\.css$/,
  95. use: [{
  96. loader: MiniCssExtractPlugin.loader
  97. },
  98. 'css-loader'
  99. ]
  100. },
  101. {
  102. test: /\.less$/,
  103. use : [
  104. MiniCssExtractPlugin.loader,
  105. { loader: "css-loader" },
  106. { loader: "less-loader" }
  107. ]},
  108. {
  109. test: /\.(png|jpg|jpeg|gif|svg)$/,
  110. use: {
  111. loader: 'file-loader',
  112. options: {
  113. outputPath: 'images/', // 图片输出的路径和存储路径保持一致
  114. limit: 10000,
  115. name: '[name].[ext]'
  116. }
  117. }
  118. }
  119. ]
  120. },
  121. // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
  122. mode: 'development',
  123. devServer: {
  124. contentBase: "./dist", //静态文件根目录
  125. proxy: {
  126. '/': proxyHost
  127. },
  128. hot: true,
  129. openPage:'index.html?behospitalCode=10003464_9&hospitalId=3&modeId=1'
  130. },
  131. stats: { children: false }
  132. }