‘壹’ web前端打包报错 webpack 打包成功但是会报错 怎么解决
别用整体打包了，容易出错是一方面，重要的是太大！太大了，打包后的文件加载太耗时！太影响用户体验，太影响性能。直接用JS混淆加密，Jshaman， 经验之谈！
‘贰’ 怎么将网页打包成桌面应用（web前端页面
在 HTML5的崛起、JavaScript要一统天下之际，有一个名为【跨平台】的技术越来越火。为什么会这么火？因为软件开发者只需一次编写程序，即可在 Windows、Linux、Mac、IOS、Android 等平台运行，大大降低了程序员的工作量，也使公司的产品可以快读迭代。曾经跨平台技术的不被看好，如今随着手机、电脑硬件的发展而快速发展。这一切，几乎由HTML5技术推动，当然，JavaScript 这个语言，是最大的功臣。
基于 HTML5 的跨平台技术比较出名的有 PhoneGap、Cordova，常常用于开发 webapp；还有 Egret、Cocos-creator、Unity 等，常用于开发游戏；还有基于 Node.js 的 nw.js，用于开发桌面应用，以及 Electron，一款比 nw.js 还强大的用网页技术来开发桌面应用的神器。
其实，以上都是废话，现在进入主题：怎么用 Electron 将网页打包成 exe 可执行文件！
假设：
1、你已经安装并配置好了 node.js （全局安装）
2、你已经用 npm 安装了 electron （全局安装）
3、你已经写好了前端网页（html、css、javascript 这些，或者基于这些的前端框架写好的网页）
4、以上三点看不懂的，赶紧去网络。。。
你如果具备了以上的假设，请继续往下看：
1、找到你的前端网页项目文件夹，新建 package.json、main.js、index.html 三个文件（注：其中的 index.html 是你的网页首页）
你的项目目录/
├── package.json
├── main.js
└── index.html
2、在 package.json 中添加如下内容
{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"}
3、在 main.js 中添加下面的内容，这个 main.js 文件就是上面 package.json 中的 "main"键 的值，所以可根据需要修改
const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}})app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.
4、如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 'index.html' 修改为你的网页首页名
5、打开 DOS，cd 到你的项目目录（或直接在你的项目目录下空白的地方 shift+鼠标右键，然后点击在此处打开命令窗口，这里看不懂的，唉，网络吧少年）
6、在上一步的 DOS 下，输入npm install electron-packager -g全局安装我们的打包神器
npminstallelectron-packager-g
7、安装好打包神器后，还是在上一步的 DOS 下，输入electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_moles 即可开始打包
electron-packager . app --win --out presenterTool --arch=x64
--version 1.4.14 --overwrite --ignore=node_moles
这个命令什么意思？蓝色部分可自行修改：
electron-packager .可执行文件的文件名--win --out打包成的文件夹名--arch=x64位还是32位--version版本号--overwrite --ignore=node_moles
以上是最简单的打包方式，至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些，就给你慢慢去研究Electron了。
如果你打包总是不成功，觉得很烦，同时对扩展功能没什么要求的话，
里面有我已将内容为 hello,world 的 index.html 网页通过 Electron 框架打包为 windows 环境下的桌面应用。
现只需将你的网页前端项目复制到 /resources/app/project 目录下，双击 exe 文件即可以桌面应用的方式运行你的网页。
‘叁’ 前端图片路径打包以后对应不上怎么解决
你需要将所有对图片名对应起来，是相同的才行，一般用rar压缩包都不会存在这种现象的
‘肆’ 前端打包,怎么只替换修改的文件,而不是整个项目替换
使用打包工具后无法之修改制定的文件
1、打包工具是在源码发生了变化后重新打包编译源代码，打包工具并不能区分具体生成后打哪些文件发生了变化
2、所以如果打包整个项目比较慢的话可以考虑优化打包速度，一般是不支持只替换修改的文件的
‘伍’ java打包jar为什么前端不是最新版的
可能是缓存问题,删除缓存,重新加载,重新打包试试
‘陆’ 【Web前端基础】webpack打包原理是什么
【Web前端基础】webpack打包原理是什么？1、概念
本质上，webpack 基于node平台，利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。
在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。
2、分析
1、人口文件
// mian.js
const a = require('./m1')
const b= require('./m2')
import { test } from './m1'
console.log(test)
//m2.js
export default {
b:2
}
//m1.js
export const test = {test:1}
export default {
a:1
}
2、生产的文件
(function (moles) {
var installedMoles = {}; //缓存
/*
* 加载模块函数
* 传入模块id
* */
function __webpack_require__(moleId) {
// 检查缓存中是否有模块
if (installedMoles[moleId]) {
return installedMoles[moleId].exports;
}
// 创建一个新模块，并缓存起来
var mole = installedMoles[moleId] = {
i: moleId,
l: false,
exports: {}
};
// 调模块的函数，moles
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
mole.l = true;
// 返回对应模块
return mole.exports;
}
__webpack_require__.m = moles;
__webpack_require__.c = installedMoles;
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__webpack_require__.n = function (mole) {
var getter = mole && mole.__esMole ?
function getDefault() {
return mole['default'];
} :
function getMoleExports() {
return mole;
};
__webpack_require__.d(getter, 'a', getter);
return getter;
};
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
__webpack_require__.p = "";
// 加载入口文件
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function (mole, exports, __webpack_require__) {
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
a: 1
});
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
b: 2
});
})
]);
观察以上代码得到结果：
1、打包后的代码是一个立即执行函数，且传入的参数为一个数组
2、参数数组就是我们引用的模块
3、每一个模块对应着数组的位置就是那么的id
4、在立即函数中加载入口文件，并执行
__webpack_require__ ： 加载并执行某一个模块并将模块缓存在 installedMoles 中。
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
这里是执行引用的某一个模块。
并将mole，exports，require 加入模块中。
这也是为什么我们在模块中有全局变量 mole/exports/require
通过对打包后的文件分析，基本可以完全理解打包过程。
‘柒’ H5前端 分享到微信时能分享成功，用安卓studio 打包后，第二次分享不成功是怎么回事
app开发完后，最好做一下扫描和加固，应用扫描可以通过静态代码分析、动态数据跟踪，定位出风险代码，同时监控敏感数据的异常行为。
加固可以在一定程度上保护自己核心代码算法,提高破解/盗版/二次打包的难度，缓解代码注入/动态调试/内存注入攻击等。
目前市面上有很多第三方加固的平台， 如果新应用发布前需要扫描或者加固的话，可以先试试免费的，例如腾讯御安全，建议自己先去扫描测试下。
‘捌’ 前端使用@vue/[email protected]打包，路由懒加载vue文件打包缺失，年初2月份的时候还能正常打包
不要 使用3.5以上的版本 很容易出现问题
你应该 使用稳定版
给你个 建议 更换版本
‘玖’ 前端打包问题
你要开发一个公共包，但是又不了解js知识，那就把js当java对待就可以了
这个包依赖jQuery，那么打包后的主文件不一定将jQuery也打包进去
这个打包后的主文件不一定不再依赖其它任何js文件
请采纳
‘拾’ 前端打包之后的代码放到服务器上请求路径不对
这个应该是设置了代理 或者是配置错了 可以看看配置文件 或者封装ajax的地方是不是设置了默认根路径