utils.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. 'use strict'
  2. const path = require('path')
  3. const config = require('../config')
  4. const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5. const packageConfig = require('../package.json')
  6. const HtmlWebpackPlugin = require('html-webpack-plugin')
  7. const merge = require('webpack-merge')
  8. const glob = require('glob')
  9. const pathSrc = path.resolve(__dirname, '../src') // F:\webui\multiple-pages\demo\src
  10. const devPathSrc = path.resolve(__dirname, '../../../src') // node_modules应用下
  11. // 指定开发模式下需要加载的模块(可以做到只加载当前模块,提高开发效率)
  12. // index模块(登录)为git必须,all 为所有
  13. // 登录 合同 首页 内转 排队 资源 销售 零星物资
  14. // ['index','appoint','configManager','homepage',''inward,'queue','RMS','sale','serviceManager','SporadicManage'
  15. // 统计报表 组织机构/系统管理 采购 仓储
  16. // 'statisticalReport','systemConfig','TMS','WMS','workFlow','ADMINISTRATORS']
  17. let devModules = ['all']
  18. // let devModules = [
  19. // 'index',
  20. // 'statisticalReport',
  21. // 'SporadicManage',
  22. // 'appoint',
  23. // 'sale',
  24. // 'inward'
  25. // ]
  26. // let devModules = ['all']
  27. // let devModules = ['index', 'sale']
  28. if (pathSrc.indexOf('node_modules') > -1) {
  29. devModules = require('../../../cors.js').devModules
  30. }
  31. // 获取入口集合
  32. const getEntries = function(suffix, polyfill) {
  33. // 自动获取
  34. const entryHtml = glob.sync(pathSrc + '/views/**/app.html') // 根据html来
  35. const devEntryHtml = glob.sync(devPathSrc + '/views/**/app.html') // 根据html来
  36. const entries = {}
  37. let setEntries = function(filePath, _chunk) {
  38. _chunk = _chunk.substring(0, _chunk.lastIndexOf('/'))
  39. let flag = true
  40. flag = false
  41. for (let item of devModules) {
  42. if (item && (_chunk.indexOf('views/' + item) >= 0 || item === 'all')) {
  43. flag = true
  44. break
  45. }
  46. }
  47. if (flag) {
  48. let arr = _chunk.split('/'),
  49. larr = [],
  50. rarr = []
  51. console.log('arr: ', arr)
  52. larr = arr.slice(0, 2)
  53. _chunk = larr.join('/')
  54. if (arr.length > 2) {
  55. rarr = arr.slice(2, arr.length)
  56. _chunk = _chunk + '/' + rarr.join('-')
  57. }
  58. if (suffix) {
  59. filePath = filePath.replace('.html', suffix)
  60. }
  61. if (polyfill) {
  62. entries[_chunk] = ['babel-polyfill', filePath]
  63. } else {
  64. entries[_chunk] = filePath
  65. }
  66. }
  67. }
  68. entryHtml.forEach(filePath => {
  69. // views/index/app.html --> views/index chunk有'/'则js/css会有相应的目录
  70. let _chunk = filePath.split(pathSrc.replace(/\\/g, '/') + '/')[1] // views/index/app.html
  71. setEntries(filePath, _chunk)
  72. })
  73. devEntryHtml.forEach(filePath => {
  74. // views/index/app.html --> views/index chunk有'/'则js/css会有相应的目录
  75. let _chunk = filePath.split(devPathSrc.replace(/\\/g, '/') + '/')[1] // views/index/app.html
  76. setEntries(filePath, _chunk)
  77. })
  78. return entries
  79. }
  80. // 多入口配置(入口JS固定为main.js)
  81. exports.entries = function() {
  82. // ['babel-polyfill', './src/main.js']
  83. let _entries = getEntries('.js', true)
  84. return _entries
  85. }
  86. //多页面输出配置
  87. exports.htmlPlugins = function() {
  88. let entryHtmls = getEntries('.html')
  89. let arr = []
  90. for (let _chunk in entryHtmls) {
  91. console.log('loading chunk:', _chunk)
  92. // _chunk :views/index/index
  93. let conf = {
  94. favicon: pathSrc + '/assets/img/favicon.ico', //favicon路径,通过webpack引入同时可以生成hash值
  95. template: entryHtmls[_chunk], // html模板路径
  96. // filename: 'views/' + fileName, // 生成的html存放路径,相对于path
  97. filename: _chunk + '.html',
  98. chunks: [_chunk],
  99. inject: true // js插入的位置,true/'head'/'body'/false
  100. }
  101. if (process.env.NODE_ENV === 'production') {
  102. console.log('package content: ', _chunk)
  103. conf = merge(conf, {
  104. chunks: ['manifest', 'vendor', _chunk],
  105. minify: {
  106. // removeAttributeQuotes: true, // 删除可删除的引号
  107. removeComments: true, // 移除HTML中的注释
  108. collapseWhitespace: true // 删除空白符与换行符
  109. },
  110. chunksSortMode: 'dependency'
  111. })
  112. }
  113. arr.push(new HtmlWebpackPlugin(conf))
  114. }
  115. console.log('arr:', arr)
  116. return arr
  117. }
  118. exports.assetsPath = function(_path) {
  119. const assetsSubDirectory =
  120. process.env.NODE_ENV === 'production'
  121. ? config.build.assetsSubDirectory
  122. : config.dev.assetsSubDirectory
  123. return path.posix.join(assetsSubDirectory, _path)
  124. }
  125. exports.cssLoaders = function(options) {
  126. options = options || {}
  127. const cssLoader = {
  128. loader: 'css-loader',
  129. options: {
  130. sourceMap: options.sourceMap
  131. }
  132. }
  133. const postcssLoader = {
  134. loader: 'postcss-loader',
  135. options: {
  136. sourceMap: options.sourceMap
  137. }
  138. }
  139. // generate loader string to be used with extract text plugin
  140. function generateLoaders(loader, loaderOptions) {
  141. const loaders = options.usePostCSS
  142. ? [cssLoader, postcssLoader]
  143. : [cssLoader]
  144. if (loader) {
  145. loaders.push({
  146. loader: loader + '-loader',
  147. options: Object.assign({}, loaderOptions, {
  148. sourceMap: options.sourceMap
  149. })
  150. })
  151. }
  152. // Extract CSS when that option is specified
  153. // (which is the case during production build)
  154. if (options.extract) {
  155. return ExtractTextPlugin.extract({
  156. use: loaders,
  157. // 解决打包后背景图片路径不对的问题
  158. // static/css/views/index/index.css
  159. // ../../../../static/img/xx.jpg
  160. publicPath: '../../../', // 注意: 此处根据路径, 自动更改
  161. fallback: 'vue-style-loader'
  162. })
  163. } else {
  164. return ['vue-style-loader'].concat(loaders)
  165. }
  166. }
  167. // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  168. return {
  169. css: generateLoaders(),
  170. postcss: generateLoaders(),
  171. less: generateLoaders('less'),
  172. sass: generateLoaders('sass', {
  173. indentedSyntax: true
  174. }),
  175. scss: generateLoaders('sass'),
  176. stylus: generateLoaders('stylus'),
  177. styl: generateLoaders('stylus')
  178. }
  179. }
  180. // Generate loaders for standalone style files (outside of .vue)
  181. exports.styleLoaders = function(options) {
  182. const output = []
  183. const loaders = exports.cssLoaders(options)
  184. for (const extension in loaders) {
  185. const loader = loaders[extension]
  186. output.push({
  187. test: new RegExp('\\.' + extension + '$'),
  188. use: loader
  189. })
  190. }
  191. return output
  192. }
  193. exports.createNotifierCallback = () => {
  194. const notifier = require('node-notifier')
  195. return (severity, errors) => {
  196. if (severity !== 'error') return
  197. const error = errors[0]
  198. const filename = error.file && error.file.split('!').pop()
  199. notifier.notify({
  200. title: packageConfig.name,
  201. message: severity + ': ' + error.name,
  202. subtitle: filename || '',
  203. icon: path.join(__dirname, 'logo.png')
  204. })
  205. }
  206. }