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

目标

1、不使用命令行，由Node.js调用webpack执行打包操作；
2、开启webpack-dev-server代理，并实现数据反向代理。

知识点

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

课程内容

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

  1. npm install express gulp-util mockjs --save

新建一个app.js

  1. touch app.js

copy进去以下代码

  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. // webpack打包
  48. app.get('/build',
  49. function(req, res, next) {
  50.   webpack(webpack_config('production'),
  51.   function(err, stats) {
  52.     gutil.log('[webpack:build]', stats.toString({
  53.       chunks: false,
  54.       colors: true
  55.     }));
  56.     if (err) {
  57.       throw new gutil.PluginError('webpack:build', err);
  58.     }
  59.     res.send({
  60.       success: true
  61.     });
  62.     next();
  63.   });
  64. });
  65. // 监听3000端口
  66. 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，最终返回一个配置对象

  1. const path = require('path'),
  2.   HtmlWebpackPlugin = require('html-webpack-plugin'),
  3.   webpack = require('webpack'),
  4.   ExtractTextPlugin = require("extract-text-webpack-plugin"),
  5.   OpenBrowserPlugin = require('open-browser-webpack-plugin'),
  6.   extractVendor = new ExtractTextPlugin('vendor.css'),
  7.   extractStyle = new ExtractTextPlugin('style.css');
  9. module.exports = (NODE_ENV) => {
  10.   let config = {
  11.     entry: NODE_ENV === 'production' ? {
  12.         vendor: ['jquery', 'bootJs'],
  13.         app: './webpack.entry'
  14.       } : [
  15.         'webpack-dev-server/client?http://localhost:8080', 
  16.         'webpack/hot/only-dev-server', 
  17.         './webpack.entry.js'
  18.     ],
  19.     output: {
  20.       filename: 'bundle.[hash].js',
  21.       path: path.resolve(__dirname, './build'),
  22.       publicPath: '',
  23.       chunkFilename: "chunk.[name].[chunkhash].js"
  24.     },
  25.     context: __dirname,
  26.     module: {
  27.       rules: [{
  28.         test: /\.css/,
  29.         use: NODE_ENV === 'production' ? extractVendor.extract({
  30.           fallback: "style-loader",
  31.           use: "css-loader?minimize=true"
  32.         }) : ['style-loader', 'css-loader?sourceMap']
  33.       },
  34.       {
  35.         test: /\.scss$/,
  36.         use: NODE_ENV === 'production' ? extractStyle.extract({
  37.           fallback: "style-loader",
  38.           use: ["css-loader", "sass-loader"]
  39.         }) : ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
  40.       },
  41.       {
  42.         test: /\.(jpg|png)$/,
  43.         use: ['url-loader?limit=10000&name=img/[name].[ext]']
  44.       },
  45.       {
  46.         test: /\.html$/,
  47.         use: 'html-loader?interpolate=require'
  48.       },
  49.       {
  50.         test: /\.js$/,
  51.         exclude: /node_modules/,
  52.         use: {
  53.           loader: 'babel-loader',
  54.           options: {
  55.             presets: ['env']
  56.           }
  57.         }
  58.       },
  59.       {
  60.         test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  61.         use: ['file-loader?name=fonts/[name].[ext]']
  62.       }]
  63.     },
  64.     plugins: NODE_ENV === 'production' ? [
  65.       new HtmlWebpackPlugin({
  66.         template: './src/index.html',
  67.         filename: 'index.html'
  68.       }), 
  69.       extractVendor, 
  70.       extractStyle, 
  71.       new webpack.DefinePlugin({
  72.         'NODE_ENV': JSON.stringify(NODE_ENV)
  73.       }), 
  74.       new webpack.optimize.UglifyJsPlugin({
  75.         compress: {
  76.           warnings: true
  77.         }
  78.       }), 
  79.       new webpack.optimize.CommonsChunkPlugin({
  80.         name: "vendor",
  81.         filename: "vendor.js",
  82.         minChunks: Infinity,
  83.       }), 
  84.       new webpack.ProvidePlugin({
  85.         $: 'jquery',
  86.         jQuery: 'jquery'
  87.       })
  88.     ] : [
  89.       new HtmlWebpackPlugin({
  90.         template: './src/index.html',
  91.         filename: 'index.html'
  92.       }), 
  93.       new webpack.HotModuleReplacementPlugin(), 
  94.       new webpack.NamedModulesPlugin(), 
  95.       new webpack.DefinePlugin({
  96.         'NODE_ENV': JSON.stringify(NODE_ENV)
  97.       }), 
  98.       new OpenBrowserPlugin({
  99.         url: 'http://localhost:8080/'
  100.       }), 
  101.       new webpack.ProvidePlugin({
  102.         $: 'jquery',
  103.         jQuery: 'jquery'
  104.       })
  105.     ],
  106.     devServer: {
  107.       contentBase: path.resolve(__dirname, 'src'),
  108.       hot: true,
  109.       noInfo: false
  110.     },
  111.     devtool: 'source-map',
  112.     resolve: {
  113.       extensions: ['.js', '.scss', '.html'],
  114.       alias: {
  115.         'jquery': 'jquery/dist/jquery.min.js',
  116.         'bootCss': 'bootstrap/dist/css/bootstrap.css',
  117.         'bootJs': 'bootstrap/dist/js/bootstrap.js',
  118.         'fontAwesome': 'font-awesome/css/font-awesome.css'
  119.       }
  120.     }
  121.   };
  123.   return config;
  124. };

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.   },'bc');
  24. });
  26. $("#pack-btn").click(() => {
  27.   $(".mask").addClass('active');
  28.   $.ajax({
  29.     url: '/build',
  30.     success: (data) => {
  31.       if (data.success) {
  32.         alert('打包成功，请查看build文件夹');
  33.       } else {
  34.         alert('打包失败!');
  35.       }
  36.       $(".mask").removeClass('active');
  37.     }
  38.   });
  39. });
  41. $("#getData-btn").click(() => {
  42.   $.ajax({
  43.     url: '/mockData',
  44.     success: (data) => {
  45.       let str = '';
  46.       str = '<h1>' + data.date + '</h1><ul>';
  47.       str += '<li>' + data.string + '</li>' + '<li>' + data.paragraph + '</li>' + '<li>' + data.number + '</li>';
  48.       str += '<img src=' + data.image + '>';
  49.       $("#mockData-con").append(str);
  50.     }
  51.   });
  52. });

copy以下代码到body.scss中

  1. .body-title{
  2.   border-radius: 4px;
  3.   border: solid 1px #ccc; 
  4.   color: #fff;
  5.   background-color: rgba(0,0,0,0.9);
  6. }
  7. .body-list{
  8.   margin: auto;
  9.   list-style: none;
  11.   .body-list-item{
  12.     font-size: 20px;
  13.   }
  14. }
  16. .mask{
  17.   background-color: rgba(255,255,255,0.9);
  18.   position: fixed;
  19.   top: 0;
  20.   left: 0;
  21.   width: 100%;
  22.   height: 100%;
  23.   z-index: 999;
  24.   text-align: center;
  25.   display: none;
  27.   &.active{
  28.     display: block;
  29.   }
  31.   span{
  32.     display: inline-block;
  33.     margin: auto;
  34.     position: absolute;
  35.     top: 50%;
  36.     left: 50%;
  37.     transform: translate(-50%, -50%, 0);
  38.   }
  39. }
  41. button.btn{
  42.   display: block;
  43.   margin: 10px auto;
  44. }
  46. #mockData-con{
  47.   text-align: left;
  48. }

运行node app.js，效果如下：
《在Node.js中调用webpack+反向代理》 - 图1
打包后目录如下：
《在Node.js中调用webpack+反向代理》 - 图2

补充

现在开发服务（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. });

修改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.   webpack_config = require('./webpack.config'),
  8.   Mock = require('mockjs'),
  9.   Random = Mock.Random,
  10.   express = require('express'),
  11.   app = express();
  13. // 用子进程开启webpack-dev-server，可按需对子进程关闭和重启
  14. /* 可运行以下语句关闭该子进程
  15.  * devServer.stdin.pause();
  16.  * devServer.kill();
  17.  */
  18. // 如果要重启子进程，运行`devServer = startServer();`
  19. var devServer = startServer();
  20. function startServer() {
  21.   let spawn = require('child_process').spawn,
  22.   devServer = spawn('node', ['webpackDevServer.js']);
  24.   devServer.stdin.setEncoding('utf-8');
  25.   devServer.stdout.pipe(process.stdout);
  26.   devServer.stdin.end();
  27.   devServer.on("error",
  28.   function(err) {
  29.     console.log("Server error:", err);
  30.   });
  31.   devServer.on("close",
  32.   function(code) {
  33.     console.log('webpack-dev-server has shutted down!', code);
  34.   });
  35.   return devServer;
  36. }
  38. // 生成随机数据，测试时非常方便
  39. app.get('/mockData',
  40. function(req, res, next) {
  41.   let template = {
  42.     "string|1-10": "★",
  43.     "number|123.10": 1.123,
  44.     'regexp': /[a-z][A-Z][0-9]/,
  45.     'date': Random.date('yyyy-MM-dd'),
  46.     'image': Random.image(),
  47.     'paragraph': Random.cparagraph()
  48.   };
  49.   let generateData = Mock.mock(template);
  50.   res.send(generateData);
  51.   next();
  52. });
  54. // webpack打包
  55. app.get('/build',
  56. function(req, res, next) {
  57.   webpack(webpack_config('production'),
  58.   function(err, stats) {
  59.     gutil.log('[webpack:build]', stats.toString({
  60.       chunks: false,
  61.       colors: true
  62.     }));
  63.     if (err) {
  64.       throw new gutil.PluginError('webpack:build', err);
  65.     }
  66.     res.send({
  67.       success: true
  68.     });
  69.     next();
  70.   });
  71. });
  72. // 监听3000端口
  73. app.listen(3000,
  74. function() {
  75.   console.log('Proxy Server is running on port 3000!');
  76. });

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