webpack.config.js 7.4 KB

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