webpack.config.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. /*const HtmlWebpackInlineSourcePlugin=require('html-webpack-inline-source-plugin');*/
  4. const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
  5. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  6. const CopyWebpackPlugin = require('copy-webpack-plugin');
  7. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  8. const webpack = require('webpack');
  9. const proxyHost = "http://192.168.2.236:5858";
  10. // const proxyHost = "http://192.168.2.241:5858";
  11. // const proxyHost = "http://192.168.3.117:5858";//铁钢
  12. // const proxyHost = "http://192.168.3.113:5858";//王峰
  13. module.exports = {
  14. entry: {
  15. index: path.resolve(__dirname, 'src/js', 'index.js'),
  16. qcScore:path.resolve(__dirname, 'src/js', 'qcScore.js'),
  17. login:path.resolve(__dirname, 'src/js', 'login.js'),
  18. console:path.resolve(__dirname, 'src/js', 'console.js'),
  19. deptConsole:path.resolve(__dirname, 'src/js', 'deptConsole.js'),
  20. moduleManager: path.resolve(__dirname, 'src/js', 'moduleManager.js'),
  21. itemManager: path.resolve(__dirname, 'src/js', 'itemManager.js'),
  22. qcList: path.resolve(__dirname, 'src/js', 'qcList.js'),
  23. qcListDept:path.resolve(__dirname, 'src/js', 'qcListDept.js'),
  24. qcListPerson:path.resolve(__dirname, 'src/js', 'qcListPerson.js'),
  25. userManager: path.resolve(__dirname, 'src/js', 'userManager.js'),
  26. roleManager: path.resolve(__dirname, 'src/js', 'roleManager.js'),
  27. tiaomu: path.resolve(__dirname, 'src/js', 'tiaomu.js'),
  28. mukuai: path.resolve(__dirname, 'src/js', 'mukuai.js'),
  29. abnormal: path.resolve(__dirname, 'src/js', 'abnormal.js'),
  30. partDetail: path.resolve(__dirname, 'src/js', 'partDetail.js'),
  31. dayDetail: path.resolve(__dirname, 'src/js', 'dayDetail.js'),
  32. payDetail: path.resolve(__dirname, 'src/js', 'payDetail.js'),
  33. deptScoreDetail: path.resolve(__dirname, 'src/js', 'deptScoreDetail.js'),
  34. deptScoreDetailControl: path.resolve(__dirname, 'src/js', 'deptScoreDetailControl.js'),
  35. jiaji: path.resolve(__dirname, 'src/js', 'jiaji.js'),
  36. partDetailControl: path.resolve(__dirname, 'src/js', 'partDetailControl.js'),
  37. quexianXQ: path.resolve(__dirname, 'src/js', 'quexianXQ.js'),
  38. quexianDetail: path.resolve(__dirname, 'src/js', 'quexianDetail.js'),
  39. quexianDetailControl: path.resolve(__dirname, 'src/js', 'quexianDetailControl.js'),
  40. mukuaiControl: path.resolve(__dirname, 'src/js', 'mukuaiControl.js'),
  41. tiaomuControl: path.resolve(__dirname, 'src/js', 'tiaomuControl.js'),
  42. vendor: 'lodash'// 多个页面所需的公共库文件,防止重复打包带入
  43. },
  44. output: {
  45. publicPath: '/', //这里要放的是静态资源CDN的地址
  46. path: path.resolve(__dirname, 'dist'),
  47. filename: 'js/[name].js'
  48. },
  49. resolve: {
  50. extensions: [".js", ".css", ".json"],
  51. alias: {} //配置别名可以加快webpack查找模块的速度
  52. },
  53. plugins: [//多入口的html文件用chunks这个参数来区分
  54. new HtmlWebpackPlugin({
  55. title: 'index',
  56. template: path.resolve(__dirname, 'src/html', 'index.html'),
  57. filename: 'index.html',
  58. chunks: ['index', 'vendor', 'common'],
  59. hash: true, //防止缓存
  60. inject: true,
  61. minify: {
  62. removeAttributeQuotes: true, //压缩 去掉引号
  63. removeComments: true, //移除HTML中的注释
  64. collapseWhitespace: true //删除空白符与换行符
  65. }
  66. }),
  67. new HtmlWebpackPlugin({
  68. title: 'console.html',
  69. template: path.resolve(__dirname, 'src/html', 'console.html'),
  70. filename: 'console.html',
  71. chunks: ['console', 'vendor', 'common'],
  72. hash: true, //防止缓存
  73. inject: true,
  74. minify: {
  75. removeAttributeQuotes: true, //压缩 去掉引号
  76. removeComments: true, //移除HTML中的注释
  77. collapseWhitespace: true //删除空白符与换行符
  78. }
  79. }),
  80. new HtmlWebpackPlugin({
  81. title: 'tiaomuControl.html',
  82. template: path.resolve(__dirname, 'src/html', 'tiaomuControl.html'),
  83. filename: 'tiaomuControl.html',
  84. chunks: ['tiaomuControl', 'vendor', 'common'],
  85. hash: true, //防止缓存
  86. inject: true,
  87. minify: {
  88. removeAttributeQuotes: true, //压缩 去掉引号
  89. removeComments: true, //移除HTML中的注释
  90. collapseWhitespace: true //删除空白符与换行符
  91. }
  92. }),
  93. new HtmlWebpackPlugin({
  94. title: 'mukuaiControl.html',
  95. template: path.resolve(__dirname, 'src/html', 'mukuaiControl.html'),
  96. filename: 'mukuaiControl.html',
  97. chunks: ['mukuaiControl', 'vendor', 'common'],
  98. hash: true, //防止缓存
  99. inject: true,
  100. minify: {
  101. removeAttributeQuotes: true, //压缩 去掉引号
  102. removeComments: true, //移除HTML中的注释
  103. collapseWhitespace: true //删除空白符与换行符
  104. }
  105. }),
  106. new HtmlWebpackPlugin({
  107. title: 'quexianDetail.html',
  108. template: path.resolve(__dirname, 'src/html', 'quexianDetail.html'),
  109. filename: 'quexianDetail.html',
  110. chunks: ['quexianDetail', 'vendor', 'common'],
  111. hash: true, //防止缓存
  112. inject: true,
  113. minify: {
  114. removeAttributeQuotes: true, //压缩 去掉引号
  115. removeComments: true, //移除HTML中的注释
  116. collapseWhitespace: true //删除空白符与换行符
  117. }
  118. }),
  119. new HtmlWebpackPlugin({
  120. title: 'quexianDetailControl.html',
  121. template: path.resolve(__dirname, 'src/html', 'quexianDetailControl.html'),
  122. filename: 'quexianDetailControl.html',
  123. chunks: ['quexianDetailControl', 'vendor', 'common'],
  124. hash: true, //防止缓存
  125. inject: true,
  126. minify: {
  127. removeAttributeQuotes: true, //压缩 去掉引号
  128. removeComments: true, //移除HTML中的注释
  129. collapseWhitespace: true //删除空白符与换行符
  130. }
  131. }),
  132. new HtmlWebpackPlugin({
  133. title: 'quexianXQ.html',
  134. template: path.resolve(__dirname, 'src/html', 'quexianXQ.html'),
  135. filename: 'quexianXQ.html',
  136. chunks: ['quexianXQ', 'vendor', 'common'],
  137. hash: true, //防止缓存
  138. inject: true,
  139. minify: {
  140. removeAttributeQuotes: true, //压缩 去掉引号
  141. removeComments: true, //移除HTML中的注释
  142. collapseWhitespace: true //删除空白符与换行符
  143. }
  144. }),
  145. new HtmlWebpackPlugin({
  146. title: 'partDetailControl.html',
  147. template: path.resolve(__dirname, 'src/html', 'partDetailControl.html'),
  148. filename: 'partDetailControl.html',
  149. chunks: ['partDetailControl', 'vendor', 'common'],
  150. hash: true, //防止缓存
  151. inject: true,
  152. minify: {
  153. removeAttributeQuotes: true, //压缩 去掉引号
  154. removeComments: true, //移除HTML中的注释
  155. collapseWhitespace: true //删除空白符与换行符
  156. }
  157. }),
  158. new HtmlWebpackPlugin({
  159. title: 'jiaji.html',
  160. template: path.resolve(__dirname, 'src/html', 'jiaji.html'),
  161. filename: 'jiaji.html',
  162. chunks: ['jiaji', 'vendor', 'common'],
  163. hash: true, //防止缓存
  164. inject: true,
  165. minify: {
  166. removeAttributeQuotes: true, //压缩 去掉引号
  167. removeComments: true, //移除HTML中的注释
  168. collapseWhitespace: true //删除空白符与换行符
  169. }
  170. }),
  171. new HtmlWebpackPlugin({
  172. title: 'abnormal.html',
  173. template: path.resolve(__dirname, 'src/html', 'abnormal.html'),
  174. filename: 'abnormal.html',
  175. chunks: ['abnormal', 'vendor', 'common'],
  176. hash: true, //防止缓存
  177. inject: true,
  178. minify: {
  179. removeAttributeQuotes: true, //压缩 去掉引号
  180. removeComments: true, //移除HTML中的注释
  181. collapseWhitespace: true //删除空白符与换行符
  182. }
  183. }),
  184. new HtmlWebpackPlugin({
  185. title: 'deptScoreDetailControl.html',
  186. template: path.resolve(__dirname, 'src/html', 'deptScoreDetailControl.html'),
  187. filename: 'deptScoreDetailControl.html',
  188. chunks: ['deptScoreDetailControl', 'vendor', 'common'],
  189. hash: true, //防止缓存
  190. inject: true,
  191. minify: {
  192. removeAttributeQuotes: true, //压缩 去掉引号
  193. removeComments: true, //移除HTML中的注释
  194. collapseWhitespace: true //删除空白符与换行符
  195. }
  196. }),
  197. new HtmlWebpackPlugin({
  198. title: 'payDetail.html',
  199. template: path.resolve(__dirname, 'src/html', 'payDetail.html'),
  200. filename: 'payDetail.html',
  201. chunks: ['payDetail', 'vendor', 'common'],
  202. hash: true, //防止缓存
  203. inject: true,
  204. minify: {
  205. removeAttributeQuotes: true, //压缩 去掉引号
  206. removeComments: true, //移除HTML中的注释
  207. collapseWhitespace: true //删除空白符与换行符
  208. }
  209. }),
  210. new HtmlWebpackPlugin({
  211. title: 'partDetail.html',
  212. template: path.resolve(__dirname, 'src/html', 'partDetail.html'),
  213. filename: 'partDetail.html',
  214. chunks: ['partDetail', 'vendor', 'common'],
  215. hash: true, //防止缓存
  216. inject: true,
  217. minify: {
  218. removeAttributeQuotes: true, //压缩 去掉引号
  219. removeComments: true, //移除HTML中的注释
  220. collapseWhitespace: true //删除空白符与换行符
  221. }
  222. }),
  223. new HtmlWebpackPlugin({
  224. title: 'dayDetail.html',
  225. template: path.resolve(__dirname, 'src/html', 'dayDetail.html'),
  226. filename: 'dayDetail.html',
  227. chunks: ['dayDetail', 'vendor', 'common'],
  228. hash: true, //防止缓存
  229. inject: true,
  230. minify: {
  231. removeAttributeQuotes: true, //压缩 去掉引号
  232. removeComments: true, //移除HTML中的注释
  233. collapseWhitespace: true //删除空白符与换行符
  234. }
  235. }),
  236. new HtmlWebpackPlugin({
  237. title: 'deptScoreDetail.html',
  238. template: path.resolve(__dirname, 'src/html', 'deptScoreDetail.html'),
  239. filename: 'deptScoreDetail.html',
  240. chunks: ['deptScoreDetail', 'vendor', 'common'],
  241. hash: true, //防止缓存
  242. inject: true,
  243. minify: {
  244. removeAttributeQuotes: true, //压缩 去掉引号
  245. removeComments: true, //移除HTML中的注释
  246. collapseWhitespace: true //删除空白符与换行符
  247. }
  248. }),
  249. new HtmlWebpackPlugin({
  250. title: 'deptConsole.html',
  251. template: path.resolve(__dirname, 'src/html', 'deptConsole.html'),
  252. filename: 'deptConsole.html',
  253. chunks: ['deptConsole', 'vendor', 'common'],
  254. hash: true, //防止缓存
  255. inject: true,
  256. minify: {
  257. removeAttributeQuotes: true, //压缩 去掉引号
  258. removeComments: true, //移除HTML中的注释
  259. collapseWhitespace: true //删除空白符与换行符
  260. }
  261. }),
  262. new HtmlWebpackPlugin({
  263. title: 'itemManager.html',
  264. template: path.resolve(__dirname, 'src/html', 'itemManager.html'),
  265. filename: 'itemManager.html',
  266. chunks: ['itemManager', 'vendor', 'common'],
  267. hash: true, //防止缓存
  268. inject: true,
  269. minify: {
  270. removeAttributeQuotes: true, //压缩 去掉引号
  271. removeComments: true, //移除HTML中的注释
  272. collapseWhitespace: true //删除空白符与换行符
  273. }
  274. }),
  275. new HtmlWebpackPlugin({
  276. title: 'moduleManager.html',
  277. template: path.resolve(__dirname, 'src/html', 'moduleManager.html'),
  278. filename: 'moduleManager.html',
  279. chunks: ['moduleManager', 'vendor', 'common'],
  280. hash: true, //防止缓存
  281. inject: true,
  282. minify: {
  283. removeAttributeQuotes: true, //压缩 去掉引号
  284. removeComments: true, //移除HTML中的注释
  285. collapseWhitespace: true //删除空白符与换行符
  286. }
  287. }),
  288. new HtmlWebpackPlugin({
  289. title: 'tiaomu.html',
  290. template: path.resolve(__dirname, 'src/html', 'tiaomu.html'),
  291. filename: 'tiaomu.html',
  292. chunks: ['tiaomu', 'vendor', 'common'],
  293. hash: true, //防止缓存
  294. inject: true,
  295. minify: {
  296. removeAttributeQuotes: true, //压缩 去掉引号
  297. removeComments: true, //移除HTML中的注释
  298. collapseWhitespace: true //删除空白符与换行符
  299. }
  300. }),
  301. new HtmlWebpackPlugin({
  302. title: 'mukuai.html',
  303. template: path.resolve(__dirname, 'src/html', 'mukuai.html'),
  304. filename: 'mukuai.html',
  305. chunks: ['mukuai', 'vendor', 'common'],
  306. hash: true, //防止缓存
  307. inject: true,
  308. minify: {
  309. removeAttributeQuotes: true, //压缩 去掉引号
  310. removeComments: true, //移除HTML中的注释
  311. collapseWhitespace: true //删除空白符与换行符
  312. }
  313. }),
  314. new HtmlWebpackPlugin({
  315. title: 'login.html',
  316. template: path.resolve(__dirname, 'src/html', 'login.html'),
  317. filename: 'login.html',
  318. chunks: ['login', 'vendor', 'common'],
  319. hash: true, //防止缓存
  320. inject: true,
  321. minify: {
  322. removeAttributeQuotes: true, //压缩 去掉引号
  323. removeComments: true, //移除HTML中的注释
  324. collapseWhitespace: true //删除空白符与换行符
  325. }
  326. }),
  327. new HtmlWebpackPlugin({
  328. title: 'qcList.html',
  329. template: path.resolve(__dirname, 'src/html', 'qcList.html'),
  330. filename: 'qcList.html',
  331. chunks: ['qcList', 'vendor', 'common'],
  332. hash: true, //防止缓存
  333. inject: true,
  334. minify: {
  335. removeAttributeQuotes: true, //压缩 去掉引号
  336. removeComments: true, //移除HTML中的注释
  337. collapseWhitespace: true //删除空白符与换行符
  338. }
  339. }),
  340. new HtmlWebpackPlugin({
  341. title: 'qcListPerson.html',
  342. template: path.resolve(__dirname, 'src/html', 'qcListPerson.html'),
  343. filename: 'qcListPerson.html',
  344. chunks: ['qcListPerson', 'vendor', 'common'],
  345. hash: true, //防止缓存
  346. inject: true,
  347. minify: {
  348. removeAttributeQuotes: true, //压缩 去掉引号
  349. removeComments: true, //移除HTML中的注释
  350. collapseWhitespace: true //删除空白符与换行符
  351. }
  352. }),
  353. new HtmlWebpackPlugin({
  354. title: 'qcListDept.html',
  355. template: path.resolve(__dirname, 'src/html', 'qcListDept.html'),
  356. filename: 'qcListDept.html',
  357. chunks: ['qcListDept', 'vendor', 'common'],
  358. hash: true, //防止缓存
  359. inject: true,
  360. minify: {
  361. removeAttributeQuotes: true, //压缩 去掉引号
  362. removeComments: true, //移除HTML中的注释
  363. collapseWhitespace: true //删除空白符与换行符
  364. }
  365. }),
  366. new HtmlWebpackPlugin({
  367. title: 'qcScore.html',
  368. template: path.resolve(__dirname, 'src/html', 'qcScore.html'),
  369. filename: 'qcScore.html',
  370. chunks: [ 'qcScore','vendor', 'common'],
  371. hash: true, //防止缓存
  372. inject: true,
  373. minify: {
  374. removeAttributeQuotes: true, //压缩 去掉引号
  375. removeComments: true, //移除HTML中的注释
  376. collapseWhitespace: true //删除空白符与换行符
  377. }
  378. }),
  379. new HtmlWebpackPlugin({
  380. title: 'statistics.html',
  381. template: path.resolve(__dirname, 'src/html', 'statistics.html'),
  382. filename: 'statistics.html',
  383. chunks: ['index', 'vendor', 'common'],
  384. hash: true, //防止缓存
  385. inject: true,
  386. minify: {
  387. removeAttributeQuotes: true, //压缩 去掉引号
  388. removeComments: true, //移除HTML中的注释
  389. collapseWhitespace: true //删除空白符与换行符
  390. }
  391. }),
  392. new HtmlWebpackPlugin({
  393. title: 'userManager.html',
  394. template: path.resolve(__dirname, 'src/html', 'userManager.html'),
  395. filename: 'userManager.html',
  396. chunks: ['userManager', 'vendor', 'common'],
  397. hash: true, //防止缓存
  398. inject: true,
  399. minify: {
  400. removeAttributeQuotes: true, //压缩 去掉引号
  401. removeComments: true, //移除HTML中的注释
  402. collapseWhitespace: true //删除空白符与换行符
  403. }
  404. }),
  405. new HtmlWebpackPlugin({
  406. title: 'roleManager.html',
  407. template: path.resolve(__dirname, 'src/html', 'roleManager.html'),
  408. filename: 'roleManager.html',
  409. chunks: ['roleManager', 'vendor', 'common'],
  410. hash: true, //防止缓存
  411. inject: true,
  412. minify: {
  413. removeAttributeQuotes: true, //压缩 去掉引号
  414. removeComments: true, //移除HTML中的注释
  415. collapseWhitespace: true //删除空白符与换行符
  416. }
  417. }),
  418. new CopyWebpackPlugin([
  419. {
  420. from:'src/resource',
  421. to:path.resolve(__dirname,'dist','resource'),
  422. flatten:true, //false会拷贝原始文件夹路径
  423. }
  424. ]),
  425. new MiniCssExtractPlugin({
  426. filename: 'css/[name].css',
  427. chunkFilename: '[id].css'
  428. }),
  429. new webpack.HotModuleReplacementPlugin(),
  430. new CleanWebpackPlugin()
  431. ],
  432. optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
  433. minimizer: [
  434. new UglifyJsPlugin({
  435. uglifyOptions: {
  436. ie8: true,
  437. compress: {
  438. properties: false,
  439. warnings: false
  440. },
  441. mangle: {
  442. screw_ie8: false,
  443. except: ['e']
  444. },
  445. output: {
  446. beautify: true
  447. },
  448. sourceMap: false
  449. }
  450. })
  451. ],
  452. splitChunks: {
  453. cacheGroups: {
  454. commons: {
  455. chunks: "initial",
  456. name: "common",
  457. minChunks: 2,
  458. maxInitialRequests: 5, // The default limit is too small to showcase the effect
  459. minSize: 0, // This is example is too small to create commons chunks
  460. reuseExistingChunk: true // 可设置是否重用该chunk
  461. }
  462. }
  463. }
  464. },
  465. module: {
  466. noParse: /WdatePicker/,
  467. rules: [
  468. {
  469. test: /.js$/,
  470. enforce: 'post',
  471. loader: 'es3ify-loader'
  472. },
  473. {
  474. test: /\.m?js$/,
  475. exclude: /(node_modules|bower_components)/,
  476. use: {
  477. loader: 'babel-loader',
  478. options: {
  479. presets:['@babel/preset-env']
  480. }
  481. }
  482. },
  483. {
  484. test: /\.css$/,
  485. use: [{
  486. loader: MiniCssExtractPlugin.loader
  487. },
  488. 'css-loader'
  489. ]
  490. },
  491. {
  492. test: /\.less$/,
  493. use: [{
  494. loader: MiniCssExtractPlugin.loader
  495. },
  496. 'css-loader', 'less-loader'
  497. ]
  498. },
  499. {
  500. test:/\.(png|gif|jpg|jpeg|svg|eot|ttf|woff|woff2)$/,
  501. use:[{
  502. loader:'url-loader',
  503. options:{
  504. limit:10240,
  505. esModule:false,
  506. name:'[name]_[hash:6].[ext]',
  507. outputPath:'images/'
  508. }
  509. }],
  510. exclude:/node_modules/
  511. },{
  512. test:/.html$/,
  513. use:'html-withimg-loader'
  514. }
  515. ]
  516. },
  517. // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
  518. mode: 'development',
  519. devServer: {
  520. contentBase: "./dist", //静态文件根目录
  521. proxy: {
  522. '/': proxyHost
  523. },
  524. hot: true,
  525. openPage:'login.html'
  526. }
  527. }