① webpack打包后的代码，如何部署到服务器上
本文章前端代码是基于vue+webpack开发的
Nginx是一款轻量级的Web 服务器/反向代理服务器
首先，webpack配置如下
在开发过程中，我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中，可以运行npm run build进行上线打包
打包完成后，会发现项目中多了dist这个文件夹
执行结果和webpack的配置文件一致。
代码被webpack打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设：
Windows操作系统：windows server 2008 64位
Nginx服务：nginx-1.12.2 64位
1.下载nginx-1.12.2 64位解压，假设nginx-1.12.2放在D:nginx-1.12.2目录中，nginx目录结构。如图下
2、前端代码放在D:nginx-1.12.2html目录中，dist目录就是刚刚前端打包完的代码。如图下
3、在D:nginx-1.12.2conf目录中，有个nginx.conf配置文件，进行编辑这个文件
4、假设前端的端口号为8082，如果端口号被占用，请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,
5、打开cmd控制台，进入目录D:nginx-1.12.2中，用start nginx命令启动服务，然后用tasklist /fi "imagename eq nginx.exe"，查看nginx服务是否启动。
4、如果改变配置文件时，需要用nginx -s reload 命令重启nginx工作进程。
5、关闭服务
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务
② 如何实现web前端页面生成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 win function 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全局安装我们的打包神器
npm install electron-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
8、打包成功后，会生成一个新的文件夹，点进去，找到 exe 文件，双击就可以看到网页变成了一个桌面应用啦！
以上是最简单的打包方式，至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些，就给你慢慢去研究Electron了。
③ 前端小白想问，jsp后面是什么意思，怎么用求大神解答
现在前端用Webpack打包JS和其它文件已经是主流了，加上Node的流行，使得前端的工程方式和后端越来越像。所有的东西都模块化，最后统一编译。Webpack因为版本的不断更新以及各种各样纷繁复杂的配置选项，在使用中出现一些迷之错误常常让人无所适从。所以了解一下Webpack究竟是怎么组织编译模块的，生成的代码到底是怎么执行的，还是很有好处的，否则它就永远是个黑箱。当然了我是前端小白，最近也是刚开始研究Webpack的原理，在这里做一点记录。
编译模块
编译两个字听起来就很黑科技，加上生成的代码往往是一大坨不知所云的东西，所以常常会让人却步，但其实里面的核心原理并没有什么难。所谓的Webpack的编译，其实只是Webpack在分析了你的源代码后，对其作出一定的修改，然后把所有源代码统一组织在一个文件里而已。最后生成一个大的bundle JS文件，被浏览器或者其它Javascript引擎执行并返回结果。
在这里用一个简单的案例来说明Webpack打包模块的原理。例如我们有一个模块mA.js
var aa = 1; function getDate() { return new Date(); } mole.exports = { aa: aa, getDate: getDate }
我随便定义了一个变量aa和一个函数getDate，然后export出来，这里是用CommonJS的写法。
然后再定义一个app.js，作为main文件，仍然是CommonJS风格：
var mA = require('./mA.js'); console.log('mA.aa =' + mA.aa); mA.getDate();
现在我们有了两个模块，使用Webpack来打包，入口文件是app.js，依赖于模块mA.js，Webpack要做几件事情：
从入口模块app.js开始，分析所有模块的依赖关系，把所有用到的模块都读取进来。 每一个模块的源代码都会被组织在一个立即执行的函数里。 改写模块代码中和require和export相关的语法，以及它们对应的引用变量。 在最后生成的bundle文件里建立一套模块管理系统，能够在runtime动态加载用到的模块。
我们可以看一下上面这个例子，Webpack打包出来的结果。最后的bundle文件总的来说是一个大的立即执行的函数，组织层次比较复杂，大量的命名也比较晦涩，所以我在这里做了一定改写和修饰，把它整理得尽量简单易懂。
首先是把所有用到的模块都罗列出来，以它们的文件名（一般是完整路径）为ID，建立一张表：
var moles = { './mA.js': generated_mA, './app.js': generated_app }
关键是上面的generated_xxx是什么？它是一个函数，它把每个模块的源代码包裹在里面，使之成为一个局部的作用域，从而不会暴露内部的变量，实际上就把每个模块都变成一个执行函数。它的定义一般是这样：
function generated_mole(mole, exports, webpack_require) { // 模块的具体代码。 // ... }
在这里模块的具体代码是指生成代码，Webpack称之为generated code。例如mA，经过改写得到这样的结果：
function generated_mA(mole, exports, webpack_require) { var aa = 1; function getDate() { return new Date(); } mole.exports = { aa: aa, getDate: getDate } }
乍一看似乎和源代码一模一样。的确，mA没有require或者import其它模块，export用的也是传统的CommonJS风格，所以生成代码没有任何改动。不过值得注意的是最后的mole.exports = ...，这里的mole就是外面传进来的参数mole，这实际上是在告诉我们，运行这个函数，模块mA的源代码就会被执行，并且最后需要export的内容就会被保存到外部，到这里就标志着mA加载完成，而那个外部的东西实际上就后面要说的模块管理系统。
接下来看app.js的生成代码：
function generated_app(mole, exports, webpack_require) { var mA_imported_mole = webpack_require('./mA.js'); console.log('mA.aa =' + mA_imported_mole['aa']); mA_imported_mole['getDate'](); }
可以看到，app.js的源代码中关于引入的模块mA的部分做了修改，因为无论是require/exports，或是ES6风格的import/export，都无法被JavaScript解释器直接执行，它需要依赖模块管理系统，把这些抽象的关键词具体化。也就是说，webpack_require就是require的具体实现，它能够动态地载入模块mA，并且将结果返回给app。
到这里你脑海里可能已经初步逐渐构建出了一个模块管理系统的想法，我们来看一下webpack_require的实现：
// 加载完毕的所有模块。 var installedMoles = {}; function webpack_require(moleId) { // 如果模块已经加载过了，直接从Cache中读取。 if (installedMoles[moleId]) { return installedMoles[moleId].exports; } // 创建新模块并添加到installedMoles。 var mole = installedMoles[moleId] = { id: moleId, exports: {} }; // 加载模块，即运行模块的生成代码， moles[moleId].call( mole.exports, mole, mole.exports, webpack_require); return mole.exports; }
注意倒数第二句里的moles就是我们之前定义过的所有模块的generated code：
var moles = { './mA.js': generated_mA, './app.js': generated_app }
webpack_require的逻辑写得很清楚，首先检查模块是否已经加载，如果是则直接从Cache中返回模块的exports结果。如果是全新的模块，那么就建立相应的数据结构mole，并且运行这个模块的generated code，这个函数传入的正是我们建立的mole对象，以及它的exports域，这实际上就是CommonJS里exports和mole的由来。当运行完这个函数，模块就被加载完成了，需要export的结果保存到了mole对象中。
所以我们看到所谓的模块管理系统，原理其实非常简单，只要耐心将它们抽丝剥茧理清楚了，根本没有什么深奥的东西，就是由这三个部分组成：
// 所有模块的生成代码 var moles； // 所有已经加载的模块，作为缓存表 var installedMoles； // 加载模块的函数 function webpack_require(moleId);
当然以上一切代码，在整个编译后的bundle文件中，都被包在一个大的立即执行的匿名函数中，最后返回的就是这么一句话：
return webpack_require(‘./app.js');
即加载入口模块app.js，后面所有的依赖都会动态地、递归地在runtime加载。当然Webpack真正生成的代码略有不同，它在结构上大致是这样：
(function(moles) { var installedMoles = {}; function webpack_require(moleId) { // ... } return webpack_require('./app.js'); }) ({ './mA.js': generated_mA, './app.js': generated_app });
可以看到它是直接把moles作为立即执行函数的参数传进去的而不是另外定义的，当然这和上面的写法没什么本质不同，我做这样的改写是为了解释起来更清楚。
ES6的import和export
以上的例子里都是用传统的CommonJS的写法，现在更通用的ES6风格是用import和export关键词，在使用上也略有一些不同。不过对于Webpack或者其它模块管理系统而言，这些新特性应该只被视为语法糖，它们本质上还是和require/exports一样的，例如export：
export aa // 等价于: mole.exports['aa'] = aa export default bb // 等价于: mole.exports['default'] = bb
而对于import：
import {aa} from './mA.js' // 等价于 var aa = require('./mA.js')['aa']
比较特殊的是这样的：
import m from './m.js'
情况会稍微复杂一点，它需要载入模块m的default export，而模块m可能并非是由ES6的export来写的，也可能根本没有export default，所以Webpack在为模块生成generated code的时候，会判断它是不是ES6风格的export，例如我们定义模块mB.js:
let x = 3; let printX = () => { console.log('x = ' + x); } export {printX} export default x
它使用了ES6的export，那么Webpack在mB的generated code就会加上一句话：
function generated_mB(mole, exports, webpack_require) { Object.defineProperty(mole.exports, '__esMole', {value: true}); // mB的具体代码 // .... }
也就是说，它给mB的export标注了一个__esMole，说明它是ES6风格的export。这样在其它模块中，当一个依赖模块以类似import m from './m.js'这样的方式加载时，会首先判断得到的是不是一个ES6 export出来的模块。如果是，则返回它的default，如果不是，则返回整个export对象。例如上面的mA是传统CommonJS的，mB是ES6风格的：
// mA is CommonJS mole import mA from './mA.js' console.log(mA); // mB is ES6 mole import mB from './mB.js' console.log(mB);
我们定义get_export_default函数：
function get_export_default(mole) { return mole && mole.__esMole? mole['default'] : mole; }
这样generated code运行后在mA和mB上会得到不同的结果：
var mA_imported_mole = webpack_require('./mA.js'); // 打印完整的 mA_imported_mole console.log(get_export_default(mA_imported_mole)); var mB_imported_mole = webpack_require('./mB.js'); // 打印 mB_imported_mole['default'] console.log(get_export_default(mB_imported_mole));
这就是在ES6的import上，Webpack需要做一些特殊处理的地方。不过总体而言，ES6的import/export在本质上和CommonJS没有区别，而且Webpack最后生成的generated code也还是基于CommonJS的mole/exports这一套机制来实现模块的加载的。
模块管理系统
以上就是Webpack如何打包组织模块，实现runtime模块加载的解读，其实它的原理并不难，核心的思想就是建立模块的管理系统，而这样的做法也是具有普遍性的，如果你读过Node.js的Mole部分的源代码，就会发现其实用的是类似的方法。这里有一篇文章可以参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:探索webpack模块及webpack3新特性关于webpack2和模块打包的新手指南（小结）详解react-webpack2-热模块替换[HMR]webpack配置sass模块的加载的方法详解用webpack把我们的业务模块分开打包的方法Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件详解webpack异步加载业务模块jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
④ 【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
通过对打包后的文件分析，基本可以完全理解打包过程。
⑤ 前端打包问题
你要开发一个公共包，但是又不了解js知识，那就把js当java对待就可以了
这个包依赖jQuery，那么打包后的主文件不一定将jQuery也打包进去
这个打包后的主文件不一定不再依赖其它任何js文件
请采纳
⑥ java中打包后，包里的文件类型是CLASS 还是JAVA，打包作用是什么
打包后是 CLASS文件， 打包目地：如果是桌面程序，打成 JAR 文件直接可以运行，再一个就是为了其它代码方便引用这里的类，可以直接加到工程LIB 中
⑦ 可以将前端文件夹打包成一个独立.html文件直接打开使用吗
引用使用相对路径，或者制作成Electron应用
⑧ 应用程序打包后，打包文件的扩展名是
rar
⑨ 前端打包,怎么只替换修改的文件,而不是整个项目替换
javaweb中的java文件会在服务器中生成class文件，比如tomcat目录下的webapps目录下，放你的javaweb项目，在项目中有个web-inf目录，里面有一个classes文件夹，里面放的都是对源码进行编译后生成的.class文件