Zan Proxy：解决前端跨域、服务端预览本地文件、

Zan Proxy 官网链接 https://youzan.github.io/zan-proxy/
Mac 需要 安装证书 https://youzan.github.io/zan-proxy/book/quick-start/cert.html

一、Zan Proxy 是什么？

官方介绍：Zan Proxy 是一个用Node.js编写的HTTP代理服务器，可用于修改请求地址和模拟响应数据。

可以通过这个代理、转发线上**获取资源的请求**，拿取本地**实时的静态代码**【css,js,html】
这样就不用每次本地调试完，打包、部署服务器查看了。本地就可以直接预览部署之后的效果。
解决跨域的问题。

二、安装Zan Proxy

方式一【推荐】、也可以直接 下载客户端：传送门
方式二、可以通过官方的 npm 或是 yarn 来安装。

通过Yarn安装

yarn global add zan-proxy 

通过NPM安装

npm i -g zan-proxy

安装检验

zan-proxy --version

三、安装 Chrome 插件 Proxy SwitchyOmega

一、官方下载地址： https://proxy-switchyomega.com/download/

一、github下载：https://github.com/FelisCatus/SwitchyOmega/releases

四、配置 Zan Proxy

第一步新建
第二步启用转发
第三步前往编辑新的转发规则集

第四步 新增

第五步 创建规则集

第六步 新增转发变量 和 新增规则

第七步 通过线上地址查看静态资源的url

第八步、 输入对应的url特征：
例如：
1.

• xxxx.xxxx.cn/mall-cloud/xxx/(js|css)/(.+).(.+).(js|css)
• ${ 转发变量名 }/$1/$2.$1

• xxxx.xxxx.cn/mall-cloud/xxx/(js|css)/(.+).(js|css)
• ${ss}/$1/$2.$1
  

第九步、选择使用的规则集

第十步、打开服务地址
使用插件选择 proxy 即可

proxy 配置：

五（可选）、本地项目启动 npm run watch

增加文件：

watch.js

const ora = require('ora');
const fs = require('fs-extra');
const chalk = require('chalk');
const webpack = require('webpack');
const config = require('../config');
const webpackConfig = require('./webpack.watch.conf');
const spinner = ora('building for watch...');
spinner.start();

process.env.NODE_ENV = 'development';

fs.removeSync(config.build.pages);
fs.removeSync(config.build.output);

const compiler = webpack(webpackConfig);
compiler.watch({
  aggregateTimeout: 300,
  poll: undefined
}, (err, stats) => { // Stats Object
  if (err) throw err;
  process.stdout.write(
    `${stats.toString({
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    })}\n\n`
  );

  if (stats.hasErrors()) {
    // console.log(stats.toJson());
    console.log(chalk.red('  Build failed with errors.\n'));
    process.exit(1);
  }
});

webpack.watch.conf.js

const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const {getAppName} = require('../../utils');

process.env.NODE_ENV = 'production';

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: false,
      extract: true
    })
  },
  devtool: false,
  output: {
    path: config.build.output,
    publicPath: `https://file.yzcdn.cn/mall-cloud/${getAppName()}/`,
    filename: 'js/[name].js',
    chunkFilename: 'js/[id].js'
  },
  plugins: [
    // new webpack.ProgressPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    // new UglifyJsPlugin({
    //   uglifyOptions: {
    //     compress: {
    //       warnings: false
    //     }
    //   },
    //   sourceMap: false,
    //   parallel: true
    // }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: 'css/[name].css',
      allChunks: true,
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: { safe: true }
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        );
      }
    }),
  ].concat(utils.htmlPlugin())
});

// if (config.build.bundleAnalyzerReport) {
//   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//   webpackConfig.plugins.push(new BundleAnalyzerPlugin());
// }

module.exports = webpackConfig;

package.json

"scripts": {
   "dev": "node webpack/dev.js",
   "watch": "node webpack/watch.js",
   "build": "node webpack/build.js"
 },