使用了同步方式的code splitting（配置），页面就显白了，也没有没错，不知道怎么回事，请求老师帮助。
我贴一下我的配置：
package.json:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | { "sideEffects": [ "*.css", "*.scss", "*.less" ], "scripts": { "dev": "webpack --config ./build/webpack.dev.js", "serve": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js" }, "devDependencies": { "@babel/core": "^7.6.4", "@babel/preset-env": "^7.6.3", "animate.css": "^3.7.2", "autoprefixer": "^9.6.4", "axios": "^0.19.0", "babel-loader": "^8.0.6", "better-scroll": "^2.0.0-beta.2", "bootstrap": "^4.3.1", "bootstrap-notify": "^3.1.3", "bootstrap-table": "^1.15.5", "core-js": "^3.2.1", "css-loader": "^3.2.0", "ejs-loader": "^0.3.5", "fibers": "^4.0.1", "file-loader": "^4.2.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "jquery": "^3.4.1", "jquery-serializejson": "^2.9.0", "less": "^3.10.3", "less-loader": "^5.0.0", "node-sass": "^4.12.0", "popper.js": "^1.15.0", "postcss-loader": "^3.0.0", "sass": "^1.23.0", "sass-loader": "^8.0.0", "style-loader": "^1.0.0", "url-loader": "^2.2.0", "webpack": "^4.41.1", "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.8.2", "webpack-merge": "^4.2.2", "ztree": "^3.5.24" }, "dependencies": { "@babel/polyfill": "^7.6.0", "better-scroll": "^2.0.0-beta.2", "core-js": "^3.2.1" }} |
.babelrc:
1 2 3 4 5 6 7 8 9 10 11 | { "presets": [ [ "@babel/preset-env", { "corejs": 3, "useBuiltIns": "usage" } ] ]} |
webpack.common.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 | var HtmlWebpackPlugin = require('html-webpack-plugin');var path = require("path")module.exports = { context: path.join(__dirname, "../src"), entry: { home: "../src/scripts/pages/home/index.js", userManagement: '../src/scripts/pages/userManagement/index.js', roleManagement: '../src/scripts/pages/roleManagement/index.js', menuManagement: '../src/scripts/pages/menuManagement/index.js' }, output: { filename: "[name].js", path: path.resolve(__dirname, "../src/main/resources/static") }, module: { rules: [ { test: /\.html$/, use: [ { loader: 'html-loader', options: { minimize: true } } ] }, { test: /\.(css)$/, use: [ { loader: 'style-loader', // inject CSS to page }, { loader: 'css-loader', // translates CSS into CommonJS modules options: { //默认全局，想用局部的地方自己加:local modules: 'global' } }, { loader: 'postcss-loader', // Run postcss actions options: { plugins: function () { // postcss plugins, can be exported to postcss.config.js return [ require('autoprefixer') ]; } } } ] }, { test: /\.(scss)$/, use: [ { loader: 'style-loader', // inject CSS to page }, { loader: 'css-loader', // translates CSS into CommonJS modules options: { modules: false } }, { loader: 'postcss-loader', // Run postcss actions options: { plugins: function () { // postcss plugins, can be exported to postcss.config.js return [ require('autoprefixer') ]; } } }, { loader: 'sass-loader' // compiles Sass to CSS } ] }, { test: /\.(less)$/, use: [ { loader: 'style-loader', // inject CSS to page }, { loader: 'css-loader', // translates CSS into CommonJS modules options: { modules: false } }, { loader: 'postcss-loader', // Run postcss actions options: { plugins: function () { // postcss plugins, can be exported to postcss.config.js return [ require('autoprefixer') ]; } } }, { loader: 'less-loader' // compiles Sass to CSS } ] }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { //10KB以下则打包成DataURL，不打包成文件 limit: 10240, useRelativePath: true } } ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: {} } ] } ] }, optimization: { usedExports: true, // splitChunks: { // chunks: 'all' // } }, plugins: [ new HtmlWebpackPlugin({ filename: "home.html", template: "../src/scripts/pages/home/template.html", meta: { 'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no' }, chunks: ['home'] }), new HtmlWebpackPlugin({ filename: "userManagement.html", template: "../src/scripts/pages/userManagement/template.html", meta: { 'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no' }, chunks: ['userManagement'] }), new HtmlWebpackPlugin({ filename: "roleManagement.html", template: "../src/scripts/pages/roleManagement/template.html", meta: { 'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no' }, chunks: ['roleManagement'] }), new HtmlWebpackPlugin({ filename: "menuManagement.html", template: "../src/scripts/pages/menuManagement/template.html", meta: { 'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no' }, chunks: ['menuManagement'] }) ]} |
webpack.dev.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var merge = require('webpack-merge');var commonConfig = require('./webpack.common');var path = require("path");const devConfig = { mode: "development", devtool: "cheap-module-eval-source-map", devServer: { publicPath: "/", contentBase: "../src/main/resources/static", filename: "[name].js", port: 8080 }};module.exports = merge(commonConfig, devConfig); |
webpack.prod.js:
1 2 3 4 5 6 7 8 9 10 | var merge = require('webpack-merge');var commonConfig = require('./webpack.common');var path = require("path");const prodConfig = { mode: "production", devtool: "cheap-module-source-map"};module.exports = merge(commonConfig, prodConfig); |
其中，我用npm run dev是正常的，用npm run build的话，axios就不请求了, chrome控制台和webpack控制台都没有报错，
只是wepack控制台有一些警告：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.Assets: home.js (370 KiB) menuManagement.js (456 KiB) roleManagement.js (456 KiB) userManagement.js (456 KiB)WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.Entrypoints: home (370 KiB) home.js userManagement (456 KiB) userManagement.js roleManagement (456 KiB) roleManagement.js menuManagement (456 KiB) menuManagement.jsWARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.For more info visit https://webpack.js.org/guides/code-splitting/ |
我用的后端是Java，所以使用Tomcat部署的，把cnpm run build的代码编译到java项目，运行后台axios不发请求，如图：
请老师帮我看看吧，谢谢！
ps:
附上加载当前用户和菜单的js代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import '../../../global/js/jQuery/jquery-vendor'import axios from 'axios'import 'bootstrap-notify'import {myUI} from '../../../global/js/utils/common'import sideNavCss from '../css/index.css'import BScroll from 'better-scroll'console.log(sideNavCss)$(function () { //返回认证信息（如用户名）和进行权限控制 axios.get('/authentication').then(function (value) { if (value.code === 0) { //显示用户名 $('.userInfo .username').text(value.data.name) //显示电子邮箱 axios.get('/user/name/' + value.data.name).then(result => { $('.userInfo .email').text(result.email) }).catch((reason) => { console.error(reason) }); //显示菜单 axios.get(`/menu/user/${value.data.name}/recursive`).then(result => { // console.log(result) let loadMenuRecursive = function (result) { let ul = document.createElement('ul'); for (let i = 0; i < result.length; i++) { let menu = result[i]; let li = document.createElement('li'); let link = document.createElement('a'); if (menu.url) { link.href = menu.url; //经理要求把/index页面隐藏了 if (menu.url === '/index') { link.style.display = 'none'; } } else { link.href = 'javascript:void(0);'; } if (location.pathname.startsWith(menu.url)) { link.classList.add('active'); } link.innerText = menu.name; li.appendChild(link); if (menu.children.length) { let subMenu = loadMenuRecursive(menu.children); li.appendChild(subMenu); } ul.appendChild(li); } return ul; } let allMenu = loadMenuRecursive(result); new Promise((resolve, reject) => { try { allMenu.classList.add('navigation', 'content'); document.querySelector(`.${sideNavCss.sideNav} .wrapper`).appendChild(allMenu); resolve(); } catch (e) { reject(e); } }).then(() => { let activeLink = $('.navigation.content li a.active'); activeLink.parentsUntil('.navigation.content').not('li').show('slow'); $('.navigation.content li a').click(function (evt) { console.log($(this).parents('.navigation.content > li').siblings()) $(this).parents('.navigation.content > li').siblings('li').find('ul').hide('fast'); $(this).next('ul').show('slow'); }); let scroll = new BScroll(document.querySelector(`.${sideNavCss.sideNav} .wrapper`), { mouseWheel: { speed: 20, invert: false, easeTime: 300 } }) window.addEventListener('resize', function (evt) { scroll.refresh() }) }).catch(reason => { console.error(reason) }) }).catch(reason => { console.error(reason) }) } else { myUI.notify(value.msg + value.data, 'danger'); } }).catch(function (reason) { console.error(reason) });}); |
749
收起
