webpack.config.js 7.9 KB

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