utils.js 7.9 KB

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