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。