webpack.config.js 6.2 KB

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