目标：

        （1）：使用node.js及其插件，搭建一个可运行的前端项目；

        （2）：实现自动部署，热部署；

        （3）：使用代理获取后台数据，实现前后端完全分离；

工具：

        webstorm、Chrome浏览器

实现：

        （1）：安装webstorm，网上大把下载。（本人用的2017版本）

        （2）：安装node.js，度娘相当强。（本人使用8.1.1）

        （3）：使用webstorm新建一个demo项目。如图：

        （4）：初始化项目。

        打开webstorm左下角的Terminal。运行npm命令对项目进行初始化。初始化完成之后，会生成一个项目文件package.json。

npm init

        初始化完成后在项目根目录下新建一个html文件和一个js文件作为入口文件，名称自定义。

       （5）：安装webpack。

npm install --save-dev webpack

        等待安装完成后，在项目根目录下新建一个  webpack.config.js。该js为webpack配置文件

var path = require('path');
var webpack = require('webpack');
module.exports = {entry: './index.js',                    //入口js文件即可output: {path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它filename: "bundle.js"               //输出js名称},module: {rules: []}
};

        （6）：安装服务器插件。

npm install live-server -g  
npm install webpack-dev-server --save-dev
npm install webpack-cli -D

        安装服务器插件完成之后需要修改  webpack.config.js配置文件。新增server配置即可

module.exports = {
……
devServer: {historyApiFallback: true,inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
},
plugins:[……new webpack.HotModuleReplacementPlugin()]……
};

修改后的 webpack.config.js 

        （7）：配置启动命令。

    修改 package.json ，新增start命令。

{"name": "demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack-dev-server --inline"
},"keywords": ["demo"],"author": "zhuhao","license": "ISC","devDependencies": {"webpack": "^4.5.0","webpack-cli": "^2.0.14","webpack-dev-server": "^3.1.3"}
}

    现在我们执行  npm start  等待项目启动。

npm start

    打开浏览器。http://localhost:8080/

        （8）：配置 npm start 项目时，自动打包自动打开浏览器。

    配置自动打开浏览器的配置：在 package.json 内scripts内start 添加代码

// Windows
"start":"start http://localhost:8081"// Mac
"start":"open http://localhost:8081"// Linux
"start":"xdg-open http://localhost:8081" 

    我是windows,则添加Windows的配置；

    配置自动打包：在start命令中添加 webpack即可；

    修改后的package.json

{"name": "demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack && start http://localhost:8080 && webpack-dev-server --inline"},"keywords": ["demo"],"author": "zhuhao","license": "ISC","devDependencies": {"webpack": "^4.5.0","webpack-cli": "^2.0.14","webpack-dev-server": "^3.1.3"}
}

        （9）：整合打包，并实现热部署，将入口index.js文件和index.html文件打包到一起。开始的时候index.html可以不用引用index.js

    安装插件 html-webpack-plugin

npm install html-webpack-plugin --save-dev

修改webpack.config.js文件配置

var HtmlWebpackPlugin = require('html-webpack-plugin');plugins: [*******new HtmlWebpackPlugin({template: './index.html'})******]

修改后的webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './index.js',mode: 'development',                    //解决打包报错问题output: {path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它filename: "bundle.js"},devServer: {historyApiFallback: true,inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些},plugins: [new HtmlWebpackPlugin({template: './index.html'}),new webpack.HotModuleReplacementPlugin()],module: {rules: []}
};

    这样配置之后，在我们修改js或者html之后 页面会自动刷新，并更新为最新代码

        （10）：配置代理服务器，获取后台数据；

修改webpack.config.js文件配置

devServer: {***********************proxy: {// 请求到 '/device' 下 的请求都会被代理到 target： http://debug.xxx.com 中'/device/*': { target: 'http://debug.xxx.com',secure: false, // 接受 运行在 https 上的服务changeOrigin: true}}}

例：我的配置是

proxy: {// 请求到 '/zboxService' 下 的请求都会被代理到 target： http://localhost:8021 中'/zboxService/*': {target: 'http://localhost:8021',secure: false, // 接受 运行在 https 上的服务changeOrigin: true}},

本地跑后台项目即可，就不存在跨域的问题了；

ajax例子：

$.ajax({url:"/zboxService/base/testWeb/getPage",//会自动代理到http://localhost:8021/zboxService/base/testWeb/getPagedataType:"json",success:function (data) {console.log(data);}
})

        （11）：其他，关于配置前端访问端口。

修改 webpack.config.js中的 devServer即可

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: './index.js',mode: 'development',output: {path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它filename: "bundle.js"},devServer: {port: 8099,                       //当然这里修改了，则其他地方也得修改，package.json中的start参数historyApiFallback: true,inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些},plugins: [new HtmlWebpackPlugin({template: './index.html'}),new webpack.HotModuleReplacementPlugin()],module: {rules: []}
};

项目下载 https://github.com/zhuhao18/Zbox-bios-web