webpack.config.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  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.241:5050";
  8. module.exports = {
  9. entry: {
  10. index: path.resolve(__dirname, 'src', 'index.js'),
  11. page: path.resolve(__dirname, 'src', 'page.js'),
  12. information: path.resolve(__dirname, 'src/js', 'information.js'),
  13. disclaimer: path.resolve(__dirname, 'src/js', 'disclaimer.js'),
  14. scale: path.resolve(__dirname, 'src/js', 'scale.js'),
  15. vendor: 'lodash'// 多个页面所需的公共库文件,防止重复打包带入
  16. },
  17. output: {
  18. publicPath: '/', //这里要放的是静态资源CDN的地址
  19. path: path.resolve(__dirname, 'dist'),
  20. filename: 'js/[name].js'
  21. },
  22. resolve: {
  23. extensions: [".js", ".css", ".json"],
  24. alias: {} //配置别名可以加快webpack查找模块的速度
  25. },
  26. plugins: [
  27. // 多入口的html文件用chunks这个参数来区分
  28. new HtmlWebpackPlugin({
  29. title: 'index',
  30. template: path.resolve(__dirname, 'src/html', 'index.html'),
  31. filename: 'index.html',
  32. chunks: ['index', 'vendor', 'common'],
  33. inject: true,
  34. hash: true, //防止缓存
  35. minify: {
  36. removeAttributeQuotes: true, //压缩 去掉引号
  37. removeComments: true, //移除HTML中的注释
  38. collapseWhitespace: true //删除空白符与换行符
  39. }
  40. }),
  41. new HtmlWebpackPlugin({
  42. title: 'page',
  43. template: path.resolve(__dirname, 'src/html', 'page.html'),
  44. filename: 'page.html',
  45. chunks: ['page', 'vendor', 'common'],
  46. inject: true,
  47. hash: true, //防止缓存
  48. minify: {
  49. removeAttributeQuotes: true, //压缩 去掉引号
  50. removeComments: true, //移除HTML中的注释
  51. collapseWhitespace: true //删除空白符与换行符
  52. }
  53. }),
  54. new HtmlWebpackPlugin({
  55. title: 'information',
  56. template: path.resolve(__dirname, 'src/html', 'information.html'),
  57. filename: 'information.html',
  58. chunks: ['information', 'vendor', 'common'],
  59. inject: true,
  60. hash: true, //防止缓存
  61. minify: {
  62. removeAttributeQuotes: true, //压缩 去掉引号
  63. removeComments: true, //移除HTML中的注释
  64. collapseWhitespace: true //删除空白符与换行符
  65. }
  66. }),
  67. new HtmlWebpackPlugin({
  68. title: 'drugInfo',
  69. template: path.resolve(__dirname, 'src/html', 'drugInfo.html'),
  70. filename: 'drugInfo.html',
  71. chunks: ['drugInfo', 'vendor', 'common'],
  72. inject: true,
  73. hash: true, //防止缓存
  74. minify: {
  75. removeAttributeQuotes: true, //压缩 去掉引号
  76. removeComments: true, //移除HTML中的注释
  77. collapseWhitespace: true //删除空白符与换行符
  78. }
  79. }),
  80. new HtmlWebpackPlugin({
  81. title: 'disclaimer',
  82. template: path.resolve(__dirname, 'src/html', 'disclaimer.html'),
  83. filename: 'disclaimer.html',
  84. chunks: ['vendor', 'common', 'disclaimer'],
  85. inject: true,
  86. hash: true, //防止缓存
  87. minify: {
  88. removeAttributeQuotes: true, //压缩 去掉引号
  89. removeComments: true, //移除HTML中的注释
  90. collapseWhitespace: true //删除空白符与换行符
  91. }
  92. }),
  93. new HtmlWebpackPlugin({
  94. title: 'scale',
  95. template: path.resolve(__dirname, 'src/html', 'scale.html'),
  96. filename: 'scale.html',
  97. chunks: ['vendor', 'common', 'scale'],
  98. inject: true,
  99. hash: true, //防止缓存
  100. minify: {
  101. removeAttributeQuotes: true, //压缩 去掉引号
  102. removeComments: true, //移除HTML中的注释
  103. collapseWhitespace: true //删除空白符与换行符
  104. }
  105. }),
  106. new MiniCssExtractPlugin({
  107. filename: 'css/[name].css',
  108. chunkFilename: '[id].css'
  109. }),
  110. new webpack.HotModuleReplacementPlugin(),
  111. new CleanWebpackPlugin(),
  112. ],
  113. optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
  114. minimizer: [
  115. new UglifyJsPlugin({
  116. uglifyOptions: {
  117. ie8: true,
  118. compress: {
  119. properties: false,
  120. warnings: false
  121. },
  122. output: {
  123. beautify: true
  124. },
  125. sourceMap: false
  126. }
  127. })
  128. ],
  129. splitChunks: {
  130. cacheGroups: {
  131. commons: {
  132. chunks: "initial",
  133. name: "common",
  134. minChunks: 2,
  135. maxInitialRequests: 5, // The default limit is too small to showcase the effect
  136. minSize: 0, // This is example is too small to create commons chunks
  137. reuseExistingChunk: true // 可设置是否重用该chunk
  138. }
  139. }
  140. }
  141. },
  142. module: {
  143. rules: [
  144. {
  145. test: /.js$/,
  146. enforce: 'post',
  147. loader: 'es3ify-loader'
  148. },
  149. {
  150. test: /\.m?js$/,
  151. exclude: /(node_modules|bower_components)/,
  152. use: {
  153. loader: 'babel-loader',
  154. options: {
  155. presets:['@babel/preset-env']
  156. }
  157. }
  158. },
  159. {
  160. test: /\.css$/,
  161. use: [{
  162. loader: MiniCssExtractPlugin.loader
  163. },
  164. 'css-loader',
  165. ]
  166. },
  167. {
  168. test: /\.(png|jpg|jpeg|gif|svg)$/,
  169. use: {
  170. loader: 'file-loader',
  171. options: {
  172. outputPath: 'images/', // 图片输出的路径和存储路径保持一致
  173. limit: 10000,
  174. name: '[name].[ext]'
  175. }
  176. }
  177. }
  178. ]
  179. },
  180. // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
  181. mode: 'development',
  182. devServer: {
  183. contentBase: path.join(__dirname, "dist"), //静态文件根目录
  184. proxy: {
  185. '/api': proxyHost
  186. },
  187. hot: true
  188. }
  189. }