webpack.config.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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 glob = require('glob');
  10. // const proxyHost = "http://192.168.2.236:5858";
  11. // const proxyHost = "http://192.168.3.184:5859";
  12. // const proxyHost = "http://172.16.8.64:5858"; //正式
  13. const proxyHost = "http://172.16.8.12:5859";
  14. // const proxyHost = "http://www.diagbot.net:5858/"; //测试
  15. // const proxyHost = "http://192.168.4.222:5858";
  16. // const proxyHost = "http://192.168.3.117:5858";//铁钢
  17. // const proxyHost = "http://192.168.3.113:5858";//王峰
  18. let entries = {
  19. vendor: 'lodash'
  20. },
  21. plugines = [];
  22. function getentries() {
  23. let entryFiles = glob.sync('./src/js/**/*.js')
  24. let htmls = glob.sync('./src/html/**/*.html');
  25. for (var i = 0; i < entryFiles.length; i++) {
  26. var filePath = entryFiles[i];
  27. var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
  28. entries[filename] = filePath;
  29. }
  30. for (var i = 0; i < htmls.length; i++) {
  31. var filePath = htmls[i];
  32. var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
  33. let conf = {
  34. filename: filename + '.html',
  35. template: filePath, // html模板路径
  36. inject: true,
  37. chunks: [filename, 'vendor', 'common', 'scrollBar'],
  38. hash: true, //防止缓存
  39. minify: {
  40. removeAttributeQuotes: true, //压缩 去掉引号
  41. removeComments: true, //移除HTML中的注释
  42. collapseWhitespace: true //删除空白符与换行符
  43. }
  44. };
  45. plugines.push(new HtmlWebpackPlugin(conf));
  46. }
  47. }
  48. getentries();
  49. module.exports = {
  50. entry: entries,
  51. output: {
  52. publicPath: '/', //这里要放的是静态资源CDN的地址
  53. path: path.resolve(__dirname, 'dist'),
  54. filename: 'js/[name].js'
  55. },
  56. resolve: {
  57. extensions: [".js", ".css", ".json"],
  58. alias: {
  59. '@': path.resolve('./src'),
  60. '@src': path.resolve('./src'),
  61. '@less': path.resolve('./src/css'),
  62. '@images': path.resolve('./src/images'),
  63. '@js': path.resolve('./src/js'),
  64. } //配置别名可以加快webpack查找模块的速度
  65. },
  66. plugins: [ //多入口的html文件用chunks这个参数来区分
  67. ...plugines,
  68. new CopyWebpackPlugin([{
  69. from: 'src/resource',
  70. to: path.resolve(__dirname, 'dist', 'resource'),
  71. flatten: true, //false会拷贝原始文件夹路径
  72. }]),
  73. new MiniCssExtractPlugin({
  74. filename: 'css/[name].css',
  75. chunkFilename: '[id].css'
  76. }),
  77. new webpack.HotModuleReplacementPlugin(),
  78. new CleanWebpackPlugin()
  79. ],
  80. optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
  81. minimizer: [
  82. new UglifyJsPlugin({
  83. uglifyOptions: {
  84. ie8: true,
  85. compress: {
  86. properties: false,
  87. warnings: false
  88. },
  89. mangle: {
  90. screw_ie8: false,
  91. except: ['e']
  92. },
  93. output: {
  94. beautify: true
  95. },
  96. sourceMap: false
  97. }
  98. })
  99. ],
  100. splitChunks: {
  101. cacheGroups: {
  102. commons: {
  103. chunks: "initial",
  104. name: "common",
  105. minChunks: 2,
  106. maxInitialRequests: 5, // The default limit is too small to showcase the effect
  107. minSize: 0, // This is example is too small to create commons chunks
  108. reuseExistingChunk: true // 可设置是否重用该chunk
  109. }
  110. }
  111. }
  112. },
  113. module: {
  114. noParse: /WdatePicker/,
  115. rules: [{
  116. test: /.js$/,
  117. enforce: 'post',
  118. loader: 'es3ify-loader'
  119. },
  120. {
  121. test: /\.m?js$/,
  122. exclude: /(node_modules|bower_components)/,
  123. use: {
  124. loader: 'babel-loader',
  125. options: {
  126. presets: ['@babel/preset-env']
  127. }
  128. }
  129. },
  130. {
  131. test: /\.css$/,
  132. use: [{
  133. loader: MiniCssExtractPlugin.loader
  134. },
  135. 'css-loader'
  136. ]
  137. },
  138. {
  139. test: /\.less$/,
  140. use: [{
  141. loader: MiniCssExtractPlugin.loader
  142. },
  143. 'css-loader', 'less-loader'
  144. ]
  145. },
  146. {
  147. test: /\.(png|gif|jpg|jpeg|svg|eot|ttf|woff|woff2)$/,
  148. use: [{
  149. loader: 'url-loader',
  150. options: {
  151. limit: 10240,
  152. esModule: false,
  153. name: '[name]_[hash:6].[ext]',
  154. outputPath: 'images/'
  155. }
  156. }],
  157. exclude: /node_modules/
  158. }, {
  159. test: /.html$/,
  160. use: 'html-withimg-loader'
  161. }
  162. ]
  163. },
  164. // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
  165. mode: 'development',
  166. devServer: {
  167. contentBase: "./dist", //静态文件根目录
  168. proxy: {
  169. '/': proxyHost
  170. },
  171. hot: true,
  172. openPage: 'login.html'
  173. }
  174. }