webpack.config.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
  4. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  6. const CopyWebpackPlugin = require('copy-webpack-plugin');
  7. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  8. const webpack = require('webpack');
  9. const proxyHost = "http://192.168.2.121:5050";
  10. // const proxyHost = "http://192.168.3.113:5050";
  11. module.exports = {
  12. entry: {
  13. index: path.resolve(__dirname, 'src/js', 'index.js'),
  14. knowledgeTree: path.resolve(__dirname, 'src/js', 'knowledgeTree.js'),
  15. participle: path.resolve(__dirname,'src/js', 'participle.js'),
  16. qaPage:path.resolve(__dirname,'src/js', 'qaPage.js'),
  17. medicalTermMap:path.resolve(__dirname,'src/js', 'medicalTermMap.js'),
  18. vendor: 'lodash'// 多个页面所需的公共库文件,防止重复打包带入
  19. },
  20. output: {
  21. publicPath: '/', //这里要放的是静态资源CDN的地址
  22. path: path.resolve(__dirname, 'dist'),
  23. filename: 'js/[name].js'
  24. },
  25. resolve: {
  26. extensions: [".js", ".css", ".json"],
  27. alias: {} //配置别名可以加快webpack查找模块的速度
  28. },
  29. plugins: [// 多入口的html文件用chunks这个参数来区分
  30. new HtmlWebpackPlugin({
  31. title: '医学知识图谱',
  32. template: path.resolve(__dirname, 'src/html', 'knowledgeGraph.html'),
  33. filename: 'knowledgeGraph.html',
  34. chunks: ['index', 'vendor', 'common'],
  35. inject: true,
  36. hash: true, //防止缓存
  37. minify: {
  38. removeAttributeQuotes: true, //压缩 去掉引号
  39. removeComments: true, //移除HTML中的注释
  40. collapseWhitespace: true //删除空白符与换行符
  41. }
  42. }),
  43. new HtmlWebpackPlugin({
  44. title: '描述框架',
  45. template: path.resolve(__dirname, 'src/html', 'knowledgeTree.html'),
  46. filename: 'knowledgeTree.html',
  47. chunks: ['knowledgeTree', 'vendor', 'common'],
  48. inject: true,
  49. hash: true, //防止缓存
  50. minify: {
  51. removeAttributeQuotes: true, //压缩 去掉引号
  52. removeComments: true, //移除HTML中的注释
  53. collapseWhitespace: true //删除空白符与换行符
  54. }
  55. }),
  56. new HtmlWebpackPlugin({
  57. title: '电子病历信息抽取',
  58. template: path.resolve(__dirname, 'src/html', 'participle.html'),
  59. filename: 'participle.html',
  60. chunks: ['participle', 'vendor', 'common'],
  61. inject: true,
  62. hash: true, //防止缓存
  63. minify: {
  64. removeAttributeQuotes: true, //压缩 去掉引号
  65. removeComments: true, //移除HTML中的注释
  66. collapseWhitespace: true //删除空白符与换行符
  67. }
  68. }),
  69. new HtmlWebpackPlugin({
  70. title: '智能问答',
  71. template: path.resolve(__dirname, 'src/html', 'qaPage.html'),
  72. filename: 'qaPage.html',
  73. chunks: ['qaPage', 'vendor', 'common'],
  74. inject: true,
  75. hash: true, //防止缓存
  76. minify: {
  77. removeAttributeQuotes: true, //压缩 去掉引号
  78. removeComments: true, //移除HTML中的注释
  79. collapseWhitespace: true //删除空白符与换行符
  80. }
  81. }),
  82. new HtmlWebpackPlugin({
  83. title: '医学术语映射',
  84. template: path.resolve(__dirname, 'src/html', 'medicalTermMap.html'),
  85. filename: 'medicalTermMap.html',
  86. chunks: ['medicalTermMap', 'vendor', 'common'],
  87. inject: true,
  88. hash: true, //防止缓存
  89. minify: {
  90. removeAttributeQuotes: true, //压缩 去掉引号
  91. removeComments: true, //移除HTML中的注释
  92. collapseWhitespace: true //删除空白符与换行符
  93. }
  94. }),
  95. new CopyWebpackPlugin([
  96. {
  97. from:'src/resources',
  98. to:path.resolve(__dirname,'dist','resources'),
  99. flatten:true, //false会拷贝原始文件夹路径
  100. }
  101. ]),
  102. new MiniCssExtractPlugin({
  103. filename: 'css/[name].css',
  104. chunkFilename: '[id].css'
  105. }),
  106. new webpack.ProvidePlugin({
  107. $: 'jquery',
  108. jQuery: 'jquery',
  109. 'window.jQuery': 'jquery'
  110. }),
  111. new webpack.HotModuleReplacementPlugin(),
  112. new CleanWebpackPlugin(),
  113. new ExtractTextPlugin("stylesheets/[name].css"),
  114. ],
  115. optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
  116. minimizer: [
  117. new UglifyJsPlugin({
  118. uglifyOptions: {
  119. ie8: true,
  120. compress: {
  121. properties: false,
  122. warnings: false
  123. },
  124. mangle: {
  125. screw_ie8: false,
  126. except: ['e']
  127. },
  128. output: {
  129. beautify: true
  130. },
  131. sourceMap: false
  132. }
  133. })
  134. ],
  135. splitChunks: {
  136. cacheGroups: {
  137. commons: {
  138. chunks: "initial",
  139. name: "common",
  140. minChunks: 2,
  141. maxInitialRequests: 5, // The default limit is too small to showcase the effect
  142. minSize: 0, // This is example is too small to create commons chunks
  143. reuseExistingChunk: true // 可设置是否重用该chunk
  144. }
  145. }
  146. }
  147. },
  148. module: {
  149. rules: [
  150. {
  151. test: /.js$/,
  152. enforce: 'post',
  153. loader: 'es3ify-loader'
  154. },
  155. {
  156. test: /\.m?js$/,
  157. exclude: /(node_modules|bower_components)/,
  158. use: {
  159. loader: 'babel-loader',
  160. options: {
  161. presets:['@babel/preset-env']
  162. }
  163. }
  164. },
  165. {
  166. test: /\.css$/,
  167. use:ExtractTextPlugin.extract({
  168. use: [
  169. // {
  170. // loader: MiniCssExtractPlugin.loader
  171. // },
  172. 'css-loader'
  173. ]
  174. })
  175. },
  176. {
  177. test: /\.less$/,
  178. use: ExtractTextPlugin.extract({
  179. fallback: 'style-loader',
  180. use: [
  181. // {
  182. // loader: 'style-loader', // creates style nodes from JS strings
  183. // },
  184. {
  185. loader: 'css-loader', // translates CSS into CommonJS
  186. },
  187. {
  188. loader: 'less-loader', // compiles Less to CSS
  189. },
  190. ],
  191. })
  192. },
  193. {
  194. test: /\.(png|jpg|jpeg|gif|svg)$/,
  195. use: {
  196. loader: 'file-loader',
  197. options: {
  198. outputPath: 'images/', // 图片输出的路径和存储路径保持一致
  199. limit: 10000,
  200. name: '[name].[ext]'
  201. }
  202. }
  203. }
  204. ]
  205. },
  206. // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
  207. mode: 'development',
  208. devServer: {
  209. contentBase: "./dist", //静态文件根目录
  210. proxy: {
  211. '/api': proxyHost
  212. },
  213. hot: true,
  214. openPage:'knowledgeGraph.html'
  215. }
  216. }