webpack.config.js 9.9 KB

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