① 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文件