目標：
（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-devvar 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/getPage
dataType:"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: []
}
};