webpack.config.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  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. vendor: 'lodash'// 多个页面所需的公共库文件,防止重复打包带入
  32. },
  33. output: {
  34. publicPath: '/', //这里要放的是静态资源CDN的地址
  35. path: path.resolve(__dirname, 'dist'),
  36. filename: 'js/[name].js'
  37. },
  38. resolve: {
  39. extensions: [".js", ".css", ".json"],
  40. alias: {} //配置别名可以加快webpack查找模块的速度
  41. },
  42. plugins: [//多入口的html文件用chunks这个参数来区分
  43. new HtmlWebpackPlugin({
  44. title: 'index',
  45. template: path.resolve(__dirname, 'src/html', 'index.html'),
  46. filename: 'index.html',
  47. chunks: ['index', 'vendor', 'common'],
  48. hash: true, //防止缓存
  49. inject: true,
  50. minify: {
  51. removeAttributeQuotes: true, //压缩 去掉引号
  52. removeComments: true, //移除HTML中的注释
  53. collapseWhitespace: true //删除空白符与换行符
  54. }
  55. }),
  56. new HtmlWebpackPlugin({
  57. title: 'console.html',
  58. template: path.resolve(__dirname, 'src/html', 'console.html'),
  59. filename: 'console.html',
  60. chunks: ['console', 'vendor', 'common'],
  61. hash: true, //防止缓存
  62. inject: true,
  63. minify: {
  64. removeAttributeQuotes: true, //压缩 去掉引号
  65. removeComments: true, //移除HTML中的注释
  66. collapseWhitespace: true //删除空白符与换行符
  67. }
  68. }),
  69. new HtmlWebpackPlugin({
  70. title: 'abnormal.html',
  71. template: path.resolve(__dirname, 'src/html', 'abnormal.html'),
  72. filename: 'abnormal.html',
  73. chunks: ['abnormal', 'vendor', 'common'],
  74. hash: true, //防止缓存
  75. inject: true,
  76. minify: {
  77. removeAttributeQuotes: true, //压缩 去掉引号
  78. removeComments: true, //移除HTML中的注释
  79. collapseWhitespace: true //删除空白符与换行符
  80. }
  81. }),
  82. new HtmlWebpackPlugin({
  83. title: 'partDetail.html',
  84. template: path.resolve(__dirname, 'src/html', 'partDetail.html'),
  85. filename: 'partDetail.html',
  86. chunks: ['partDetail', 'vendor', 'common'],
  87. hash: true, //防止缓存
  88. inject: true,
  89. minify: {
  90. removeAttributeQuotes: true, //压缩 去掉引号
  91. removeComments: true, //移除HTML中的注释
  92. collapseWhitespace: true //删除空白符与换行符
  93. }
  94. }),
  95. new HtmlWebpackPlugin({
  96. title: 'deptConsole.html',
  97. template: path.resolve(__dirname, 'src/html', 'deptConsole.html'),
  98. filename: 'deptConsole.html',
  99. chunks: ['deptConsole', 'vendor', 'common'],
  100. hash: true, //防止缓存
  101. inject: true,
  102. minify: {
  103. removeAttributeQuotes: true, //压缩 去掉引号
  104. removeComments: true, //移除HTML中的注释
  105. collapseWhitespace: true //删除空白符与换行符
  106. }
  107. }),
  108. new HtmlWebpackPlugin({
  109. title: 'itemManager.html',
  110. template: path.resolve(__dirname, 'src/html', 'itemManager.html'),
  111. filename: 'itemManager.html',
  112. chunks: ['itemManager', 'vendor', 'common'],
  113. hash: true, //防止缓存
  114. inject: true,
  115. minify: {
  116. removeAttributeQuotes: true, //压缩 去掉引号
  117. removeComments: true, //移除HTML中的注释
  118. collapseWhitespace: true //删除空白符与换行符
  119. }
  120. }),
  121. new HtmlWebpackPlugin({
  122. title: 'moduleManager.html',
  123. template: path.resolve(__dirname, 'src/html', 'moduleManager.html'),
  124. filename: 'moduleManager.html',
  125. chunks: ['moduleManager', 'vendor', 'common'],
  126. hash: true, //防止缓存
  127. inject: true,
  128. minify: {
  129. removeAttributeQuotes: true, //压缩 去掉引号
  130. removeComments: true, //移除HTML中的注释
  131. collapseWhitespace: true //删除空白符与换行符
  132. }
  133. }),
  134. new HtmlWebpackPlugin({
  135. title: 'tiaomu.html',
  136. template: path.resolve(__dirname, 'src/html', 'tiaomu.html'),
  137. filename: 'tiaomu.html',
  138. chunks: ['tiaomu', 'vendor', 'common'],
  139. hash: true, //防止缓存
  140. inject: true,
  141. minify: {
  142. removeAttributeQuotes: true, //压缩 去掉引号
  143. removeComments: true, //移除HTML中的注释
  144. collapseWhitespace: true //删除空白符与换行符
  145. }
  146. }),
  147. new HtmlWebpackPlugin({
  148. title: 'mukuai.html',
  149. template: path.resolve(__dirname, 'src/html', 'mukuai.html'),
  150. filename: 'mukuai.html',
  151. chunks: ['mukuai', 'vendor', 'common'],
  152. hash: true, //防止缓存
  153. inject: true,
  154. minify: {
  155. removeAttributeQuotes: true, //压缩 去掉引号
  156. removeComments: true, //移除HTML中的注释
  157. collapseWhitespace: true //删除空白符与换行符
  158. }
  159. }),
  160. new HtmlWebpackPlugin({
  161. title: 'login.html',
  162. template: path.resolve(__dirname, 'src/html', 'login.html'),
  163. filename: 'login.html',
  164. chunks: ['login', 'vendor', 'common'],
  165. hash: true, //防止缓存
  166. inject: true,
  167. minify: {
  168. removeAttributeQuotes: true, //压缩 去掉引号
  169. removeComments: true, //移除HTML中的注释
  170. collapseWhitespace: true //删除空白符与换行符
  171. }
  172. }),
  173. new HtmlWebpackPlugin({
  174. title: 'qcList.html',
  175. template: path.resolve(__dirname, 'src/html', 'qcList.html'),
  176. filename: 'qcList.html',
  177. chunks: ['qcList', 'vendor', 'common'],
  178. hash: true, //防止缓存
  179. inject: true,
  180. minify: {
  181. removeAttributeQuotes: true, //压缩 去掉引号
  182. removeComments: true, //移除HTML中的注释
  183. collapseWhitespace: true //删除空白符与换行符
  184. }
  185. }),
  186. new HtmlWebpackPlugin({
  187. title: 'qcListPerson.html',
  188. template: path.resolve(__dirname, 'src/html', 'qcListPerson.html'),
  189. filename: 'qcListPerson.html',
  190. chunks: ['qcListPerson', 'vendor', 'common'],
  191. hash: true, //防止缓存
  192. inject: true,
  193. minify: {
  194. removeAttributeQuotes: true, //压缩 去掉引号
  195. removeComments: true, //移除HTML中的注释
  196. collapseWhitespace: true //删除空白符与换行符
  197. }
  198. }),
  199. new HtmlWebpackPlugin({
  200. title: 'qcListDept.html',
  201. template: path.resolve(__dirname, 'src/html', 'qcListDept.html'),
  202. filename: 'qcListDept.html',
  203. chunks: ['qcListDept', 'vendor', 'common'],
  204. hash: true, //防止缓存
  205. inject: true,
  206. minify: {
  207. removeAttributeQuotes: true, //压缩 去掉引号
  208. removeComments: true, //移除HTML中的注释
  209. collapseWhitespace: true //删除空白符与换行符
  210. }
  211. }),
  212. new HtmlWebpackPlugin({
  213. title: 'qcScore.html',
  214. template: path.resolve(__dirname, 'src/html', 'qcScore.html'),
  215. filename: 'qcScore.html',
  216. chunks: [ 'qcScore','vendor', 'common'],
  217. hash: true, //防止缓存
  218. inject: true,
  219. minify: {
  220. removeAttributeQuotes: true, //压缩 去掉引号
  221. removeComments: true, //移除HTML中的注释
  222. collapseWhitespace: true //删除空白符与换行符
  223. }
  224. }),
  225. new HtmlWebpackPlugin({
  226. title: 'statistics.html',
  227. template: path.resolve(__dirname, 'src/html', 'statistics.html'),
  228. filename: 'statistics.html',
  229. chunks: ['index', 'vendor', 'common'],
  230. hash: true, //防止缓存
  231. inject: true,
  232. minify: {
  233. removeAttributeQuotes: true, //压缩 去掉引号
  234. removeComments: true, //移除HTML中的注释
  235. collapseWhitespace: true //删除空白符与换行符
  236. }
  237. }),
  238. new HtmlWebpackPlugin({
  239. title: 'userManager.html',
  240. template: path.resolve(__dirname, 'src/html', 'userManager.html'),
  241. filename: 'userManager.html',
  242. chunks: ['userManager', 'vendor', 'common'],
  243. hash: true, //防止缓存
  244. inject: true,
  245. minify: {
  246. removeAttributeQuotes: true, //压缩 去掉引号
  247. removeComments: true, //移除HTML中的注释
  248. collapseWhitespace: true //删除空白符与换行符
  249. }
  250. }),
  251. new HtmlWebpackPlugin({
  252. title: 'roleManager.html',
  253. template: path.resolve(__dirname, 'src/html', 'roleManager.html'),
  254. filename: 'roleManager.html',
  255. chunks: ['roleManager', 'vendor', 'common'],
  256. hash: true, //防止缓存
  257. inject: true,
  258. minify: {
  259. removeAttributeQuotes: true, //压缩 去掉引号
  260. removeComments: true, //移除HTML中的注释
  261. collapseWhitespace: true //删除空白符与换行符
  262. }
  263. }),
  264. new CopyWebpackPlugin([
  265. {
  266. from:'src/resource',
  267. to:path.resolve(__dirname,'dist','resource'),
  268. flatten:true, //false会拷贝原始文件夹路径
  269. }
  270. ]),
  271. new MiniCssExtractPlugin({
  272. filename: 'css/[name].css',
  273. chunkFilename: '[id].css'
  274. }),
  275. new webpack.HotModuleReplacementPlugin(),
  276. new CleanWebpackPlugin()
  277. ],
  278. optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
  279. minimizer: [
  280. new UglifyJsPlugin({
  281. uglifyOptions: {
  282. ie8: true,
  283. compress: {
  284. properties: false,
  285. warnings: false
  286. },
  287. mangle: {
  288. screw_ie8: false,
  289. except: ['e']
  290. },
  291. output: {
  292. beautify: true
  293. },
  294. sourceMap: false
  295. }
  296. })
  297. ],
  298. splitChunks: {
  299. cacheGroups: {
  300. commons: {
  301. chunks: "initial",
  302. name: "common",
  303. minChunks: 2,
  304. maxInitialRequests: 5, // The default limit is too small to showcase the effect
  305. minSize: 0, // This is example is too small to create commons chunks
  306. reuseExistingChunk: true // 可设置是否重用该chunk
  307. }
  308. }
  309. }
  310. },
  311. module: {
  312. noParse: /WdatePicker/,
  313. rules: [
  314. {
  315. test: /.js$/,
  316. enforce: 'post',
  317. loader: 'es3ify-loader'
  318. },
  319. {
  320. test: /\.m?js$/,
  321. exclude: /(node_modules|bower_components)/,
  322. use: {
  323. loader: 'babel-loader',
  324. options: {
  325. presets:['@babel/preset-env']
  326. }
  327. }
  328. },
  329. {
  330. test: /\.css$/,
  331. use: [{
  332. loader: MiniCssExtractPlugin.loader
  333. },
  334. 'css-loader'
  335. ]
  336. },
  337. {
  338. test: /\.less$/,
  339. use: [{
  340. loader: MiniCssExtractPlugin.loader
  341. },
  342. 'css-loader', 'less-loader'
  343. ]
  344. },
  345. {
  346. test:/\.(png|gif|jpg|jpeg|svg|eot|ttf|woff|woff2)$/,
  347. use:[{
  348. loader:'url-loader',
  349. options:{
  350. limit:10240,
  351. esModule:false,
  352. name:'[name]_[hash:6].[ext]',
  353. outputPath:'images/'
  354. }
  355. }],
  356. exclude:/node_modules/
  357. },{
  358. test:/.html$/,
  359. use:'html-withimg-loader'
  360. }
  361. ]
  362. },
  363. // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
  364. mode: 'development',
  365. devServer: {
  366. contentBase: "./dist", //静态文件根目录
  367. proxy: {
  368. '/': proxyHost
  369. },
  370. hot: true,
  371. openPage:'login.html'
  372. }
  373. }