在Node.js中调用webpack+反向代理

    1、：webpack-dev-server可以配置代理；
    2、mockjs：生成随机数据；
    3、：Node.js子进程；
    4、express：Node.js非常好用的应用框架；
    5、：可以把webpack的打包提示信息美观地展现。

    webpack提供了一个Node.js API，能够在Node.js运行时被调用。咱们依然在lesson5的基础上进行代码改造，npm安装express、gulp-util、mockjs

    新建一个app.js

    1. #! /usr/bin/env node --harmony
    3. const fs = require('fs'),
    4.   path = require('path'),
    5.   gutil = require('gulp-util'),
    6.   webpack = require('webpack'),
    7.   webpackDevServer = require('webpack-dev-server'),
    8.   webpack_config = require('./webpack.config'),
    9.   Mock = require('mockjs'),
    10.   Random = Mock.Random,
    11.   express = require('express'),
    12.   app = express();
    14. // 启动webpack-dev-server
    15. const compiler = webpack(webpack_config('development'));
    16. new webpackDevServer(compiler, {
    17.   //  这里填写的参数将会插入或者替换webpack.config.js中的原配置
    18.   stats: {
    19.     colors: true,
    20.     chunks: false
    21.   },
    22.   noInfo: false,
    23.   proxy: {
    24.     '*': {
    25.       target: 'http://localhost:3000',
    26.       // 代理到本地3000端口，也就是咱们node运行的端口
    27.     }
    28.   }
    29. }).listen(8080,function() {console.log('App (dev) is now running on port 8080!');});
    31. // 生成随机数据，测试时非常方便
    32. app.get('/mockData',
    33. function(req, res, next) {
    34.   let template = {
    35.     "string|1-10": "★",
    36.     "number|123.10": 1.123,
    37.     'regexp': /[a-z][A-Z][0-9]/,
    38.     'date': Random.date('yyyy-MM-dd'),
    39.     'image': Random.image(),
    40.     'paragraph': Random.cparagraph()
    41.   };
    42.   let generateData = Mock.mock(template);
    43.   res.send(generateData);
    44.   next();
    45. });
    47. app.get('/build',
    48. function(req, res, next) {
    49.   webpack(webpack_config('production'),
    51.     gutil.log('[webpack:build]', stats.toString({
    52.       chunks: false,
    53.       colors: true
    54.     }));
    55.     if (err) {
    56.       throw new gutil.PluginError('webpack:build', err);
    57.     }
    58.     res.send({
    59.       success: true
    60.     });
    61.     next();
    62.   });
    63. });
    64. // 监听3000端口
    65. app.listen(3000,function() {console.log('Proxy Server is running on port 3000!');});

    copy以下代码到webpack.config.js，自此不需要用npm命令来打包了，也就可以不需要用到process.env.NODE_ENV的值，为了区分开发和生产环境，这里把webpack.config.js exports成一个函数，并通过传递参数NODE_ENV，最终返回一个配置对象

    copy以下代码到body.html中

    1. <h1 class="body-title">this is body</h1>
    2. <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
    3. <ul class="body-list">
    4.   <li class="body-list-item" id="body-input">你可以使用BannerPlugin给你的每个打包文件加上你的签名<br>webpack教程<br>by kingvid</li>
    5. </ul>
    6. <button id="body-btn" class="btn">点我</button>
    7. <button id="pack-btn" class="btn">打包</button>
    8. <button id="getData-btn" class="btn">获取本地测试数据</button>
    9. <div id="mockData-con"></div>
    10. <div class="mask"><span><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span></div>

    copy以下代码到body.js中

    1. var element = $("#body-input"),
    2.   str = element.html(),
    3.   progress = 0,
    4.   timer = setInterval(() => {
    5.     let current = str.substr(progress, 1);
    6.     if (current == '<') {
    7.       progress = str.indexOf('>', progress) + 1;
    8.     } else {
    9.       progress++;
    10.     }
    11.     element.html(str.substring(0, progress) + (progress && 1 ? '_': ''));
    12.     if (progress >= str.length) {
    13.       clearInterval(timer);
    14.       element.html(str.substring(0, progress));
    15.     }
    16.   },150);
    18. require('../../public/a.js');
    19. $("#body-btn").click(() => {
    20.   require.ensure(['../../public/b.js'],
    21.   function(require) {
    22.     require('../../public/c.js');
    23. });
    26.   $(".mask").addClass('active');
    27.   $.ajax({
    28.     url: '/build',
    29.     success: (data) => {
    30.       if (data.success) {
    31.         alert('打包成功，请查看build文件夹');
    32.       } else {
    33.         alert('打包失败!');
    34.       }
    35.       $(".mask").removeClass('active');
    36.     }
    37.   });
    38. });
    40. $("#getData-btn").click(() => {
    41.   $.ajax({
    42.     url: '/mockData',
    43.     success: (data) => {
    44.       let str = '';
    45.       str = '<h1>' + data.date + '</h1><ul>';
    46.       str += '<li>' + data.string + '</li>' + '<li>' + data.paragraph + '</li>' + '<li>' + data.number + '</li>';
    47.       str += '<img src=' + data.image + '>';
    48.       $("#mockData-con").append(str);
    49.     }
    50.   });
    51. });

    运行node app.js，效果如下：

    打包后目录如下：
    《在Node.js中调用webpack+反向代理》 - 图1

    现在开发服务（8080端口）和代理服务（3000端口）是包含在一个进程中了，假设咱们要关闭webpack-dev-server或重启它的话，就会影响到整个进程了，这里咱们可以这样操作，把webpack-dev-server放到Node.js的一个子进程里面去，如果要关闭webpack-dev-server的话，就不会影响到主进程了。
    新建一个webpackDevServer.js文件

    1. touch webpackDevServer.js

    copy进去以下代码

    1. const webpack = require('webpack');
    2. const webpack_config = require('./webpack.config');
    3. const webpackDevServer = require('webpack-dev-server');
    5. //webpack dev server
    6. const compiler = webpack(webpack_config('development'));
    7. new webpackDevServer(compiler, {
    8.   stats: {
    9.     colors: true,
    10.     chunks: false
    11.   },
    12.   noInfo: false,
    13.   proxy: {
    14.     '*': {
    15.       target: 'http://localhost:3000',
    16.     }
    17.   }
    18. }).listen(8080,
    19. function() {
    20.   console.log('App (dev) is now running on port 8080!');
    21. });

    运行node app.js，效果如上，页面运行顺利。