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