1.安裝webpack
//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack
2.
babel Babel其實是幾個模塊化的包，其核心功能位於稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對於每一個你需要的
功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
// npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
3.
//安裝 React 和 React-DOM
npm install --save react react-dom
4.
//安裝css依賴
npm install --save-dev style-loader css-loader
//全局安裝webpack-cli
npm install webpack-cli -g
5
//安裝插件
npm install --save-dev html-webpack-plugin
需要准備的文件：main.js ,webpack-cfig.js,package.json.
main.js :
require('./js/json2.js');
require('./js/ts.js');
require('./js/mqttws31.min.js');
require('./js/index.js');
webpack-cfig.js:
var webpack = require('webpack');//引入webpack
module.exports = {
entry:__dirname+"/main.js",//主入口，必寫項
output: {
publicPath:'./out/',
path: __dirname+"/out",//輸出路徑
filename: "bundle.js"//輸出名字
},
//讀取js和css
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
}]
},
{
test:/.(jpg|png)$/,
use: [{
loader: "file-loader"
}]
},
]
},
//引入jquery。
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
package.json:
{
"name": "TicketShow",
"main": "TicketShow/index.html",//主入口
"window": {
"fullscreen": true,
"resizable": false
},
"webkit": {
"plugin": true
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.0",
"webpack": "^4.17.2"
},
"dependencies": {
"react": "^16.5.0",
"react-dom": "^16.5.0",
"requirejs-text": "^2.0.15",
"webpack-cli": "^3.1.0",
"webpack-command": "^0.4.1"
}
}
設置完以后直接在命令行中運行webpack.本地會生成out文件夾，文件夾內會生成bundle。Js和依賴的圖片。
到此為止，項目打包完成。
注意：webpack打包是以模塊為主，所以打包js后方法變成局部變量，在html中調用js中的方法無效。所以需要將方法設為全局變量：Window.方法名=function（）{方法內容}
6.將打包好的項目壓縮成exe。
用到的工具nw.js.和enigma virtual box。
(1) 將項目壓縮成壓縮包，然后把后綴名改為nw。
(2) 將壓縮包放到nw工具的根目錄。用命令行執行：
copy /b nw.exe+app.nw app.exe。
會在本地生成app.exe.
到此為止，項目可以正常啟動。
我們是發布所用，所以需要將app和nw打包到一起。
啟動enigma virtual box。
選擇Input和Output文件，將locales和pnacl兩個文件夾拖入，然后點擊add按鈕添加剩下的不包含我們自己創建的文件。
點擊Process，等待一會看到File successfully save則表示成功，app_boxed.exe這個文件就可以在任何目錄下獨立運行了。
參考資料：https://segmentfault.com/a/1190000006178770。
https://jingyan.baidu.com/article/3065b3b6a06c92becff8a483.html。