前端工程化这些事情现在已经算是深入人心了，即便不清楚具体含义vue-cli creat-react-app之类的脚手架也帮助大家快速开发了不少项目。

今天顺便总结了下之前的一些经验，希望对大家的工作或者学习有一些帮助。
老生常谈的splitChunks、Dll啥的就不多说了，简单分享些插件和配置功能优化，方便大家更省力地写代码。

配置

1. 代理配置：

很多时候我们为了跨域会给devServer配个proxy啥的，没数据的时候要连接到mock接口上，有数据的时候又要切换到dev上，有时候又要调试复现qa环境的问题，一般像这个时候我们可以简单配个npm script

    # 默认 dev 环境
    npm run dev

    # mock 环境
    npm run dev --mock

那对webpack怎么配置呢

新建一个proxy.js文件

const config = {
    dev: {
         ... // 你的proxy配置 文档自行参考 https://webpack.js.org/configuration/dev-server/#devserver-proxy  
    },
    mock: {
        ...
    }
};

let proxy = config.dev;

for (const key in proxy) {
    if (process.env[`npm_config_${key}`]) {
        current = { ...proxy, ...config[key] };
    };
};
module.exports = current;

然后导入到你的webpack.config.dev.js中，设置为devServer的proxy

const proxy = require('./proxy.js');

...
devServer: {
    ...
    proxy: proxy
}

然后就完事了，当然了，这是最简单的方式，一般情况下我们是还需要根据当前运行的环境变量再做判定的。业务上的问题这里就不展开了。

2. log信息

很多时候我们会在项目运行或者打包的时候出现一大堆没啥用的信息，
改下webpack里的stats即可
开发环境也可以用friendly-errors-webpack-plugin也是挺方便的

3.sourceMap

开发环境随便配个喜欢的sourceMap就好，但是生产环境就要去掉了，当然为了方便qa调试，最好也为打包做好各种环境设置，
但是别把sourcemap打到业务代码里是每个程序员的基本素养。对，我说的就是inline-source-map这种配置，有的话赶紧改掉，相信我这是为了你的职业生涯考虑。生产环境要用也只能用source-map,然后让运维大哥随手屏蔽下所有.map文件即可。

功能插件

1. 依赖分析

这个是之前在vue-cli上找的，用着感觉也挺顺手的，

# 下载插件
npm i -D webpack-bundle-analyzer

    // 注入webpack.config.prod.js
    const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
    
    // 写入plugin     
    ...
    plugins: [
        process.env.npm_config_report && new BundleAnalyzerPlugin()
    ]

然后你就可以在打完包后来一个依赖分析,用着也挺方便的

    npm run build --report

2. 邮件

有些利用travis 或者jenkins做远端打包的项目，在项目发布前可以简单配置一个邮件功能，包含打包内容、git commit信息什么的，就不需要专门找人一一告知，方便所有开发人员根据业务，提高开发效率。
推荐nodemailer

工作流程优化

Makefile

很多时候npm script 可能不够用或者说看上去并不怎么直观，因为没法写备注可能也说不清具体什么用
这时候可以使用Makefile
在根目录建个Makefile文件
然后就可以在里面配置一些基本命令，可以理解为对npm script做一个简单的封装，关键是可以写备注

# 开发
start:
    npm run dev

# 打包
build:
    npm run build

# mock环境
mock:
    npm run dev --mock

然后你在当前目录下输入

    make start

就可以开始干活了

异常追踪

线上环境为了保证用户隐私是不允许开发人员直接接触用户信息的，但是有些问题光靠公司现有的测试机也无法完全覆盖，异常跟踪的框架网上挺多，这里简单提一下不做深入讨论。

【待续】

工作流程以及webpack配置一些优化

配置