webpack.config.js 5.1 KB

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