webpack构建配置管理推荐方案

lsekfe

webpack优化原因
　　·V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf）
　　· 默认使用更快的 md4 hash 算法
　　· webpacks AST 可以直接从 loader 传递给 AST，减少解析时间
　　· 使用字符串方法替代正则表达式
　　构建配置管理的可选方案
　　1. 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制。
　　2. 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks。
　　3. 抽成一个工具进行管理，比如：create-react-app, kyt, nwb。
　　4. 将所有的配置放在一个文件，通过 --env 参数控制分支选择。

1. 　团队规模大，选3，规模小，选1，2

复制代码

构建配置包设计
　　通过多个配置文件管理不同环境的 webpack 配置。
　　·基础配置：webpack.base.js
　　·开发环境：webpack.dev.js
　　·生产环境：webpack.prod.js
　　·SSR环境：webpack.ssr.js
　　……
　　抽离成一个 npm 包统一管理：
　　·规范：Git commit日志、README、ESLint 规范、Semver 规范
　　·质量：冒烟测试、单元测试、测试覆盖率和 CI
　　在通过 webpack-merge 组合配置。

使用 ESLint 规范构建脚本
　　· 使用 eslint-config-airbnb-base
　　· eslint --fix 可以自动处理空格

1. module.exports = {
   
2. 　　    "parser": "babel-eslint",
   
3. 　　    "extends": "airbnb",
   
4. 　　    "env": {
   
5. 　　        "browser": true,
   
6. 　　        "node": true
   
7. 　　    },
   
8. 　　    "rules": {
   
9. 　　        "indent": ["error", 4]
   
10. 　　    }
    
11. 　　};

复制代码

冒烟测试
　　冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种
　　预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。
　　·判断构建是否成功

1. 　const path = require('path');
   
2. 　　const webpack = require('webpack');
   
3. 　　const rimraf = require('rimraf');
   
4. 　　const Mocha = require('mocha');
   
5. 　　const mocha = new Mocha({
   
6. 　　    timeout: '10000ms'
   
7. 　　});
   
8. 　　process.chdir(path.join(__dirname, 'template'));
   
9. 　　rimraf('./dist', () => {
   
10. 　　    const prodConfig = require('../../lib/webpack.prod.js');
    
11. 　　    webpack(prodConfig, (err, stats) => {
    
12. 　　        if (err) {
    
13. 　　            console.error(err);
    
14. 　　            process.exit(2);
    
15. 　　        }
    
16. 　　        console.log(stats.toString({
    
17. 　　            colors: true,
    
18. 　　            modules: false,
    
19. 　　            children: false
    
20. 　　        }));
    
21. 　　        console.log('Webpack build success, begin run test.');
    
22. 　　        mocha.addFile(path.join(__dirname, 'html-test.js'));
    
23. 　　        mocha.addFile(path.join(__dirname, 'css-js-test.js'));
    
24. 　　        mocha.run();
    
25. 　　    });
    
26. 　　});

复制代码

·判断基本功能是否正常

1. 　const glob = require('glob-all');
   
2. 　　describe('Checking generated html files', () => {
   
3. 　　    it('should generate html files', (done) => {
   
4. 　　        const files = glob.sync([
   
5. 　　            './dist/index.html',
   
6. 　　            './dist/search.html'
   
7. 　　        ]);
   
8. 　　        if (files.length > 0) {
   
9. 　　            done();
   
10. 　　        } else {
    
11. 　　            throw new Error('no html files generated');
    
12. 　　        }
    
13. 　　    });
    
14. 　　});
    
15. 　　const glob = require('glob-all');
    
16. 　　describe('Checking generated css js files', () => {
    
17. 　　    it('should generate css js files', (done) => {
    
18. 　　        const files = glob.sync([
    
19. 　　            './dist/index_*.js',
    
20. 　　            './dist/index_*.css',
    
21. 　　            './dist/search_*.js',
    
22. 　　            './dist/search_*.css',
    
23. 　　        ]);
    
24. 　　        if (files.length > 0) {
    
25. 　　            done();
    
26. 　　        } else {
    
27. 　　            throw new Error('no css js files generated');
    
28. 　　        }
    
29. 　　    });
    
30. 　　});

复制代码

单元测试
　　·技术选型：Mocha + Chai
　　· 测试代码：describe, it, except
　　· 测试命令：mocha  add.test.js

1. const assert = require('assert');
   
2. 　　describe('webpack.base.js test case', () => {
   
3. 　　    const baseConfig = require('../../lib/webpack.base.js')
   
4. 　　    it('entry', () => {
   
5. 　　        assert.equal(baseConfig.entry.index, '/Users/cpselvis/my-project/builder-webpack/test/smoke/template/src/index/index.js');
   
6. 　　        assert.equal(baseConfig.entry.search, '/Users/cpselvis/my-project/builder-webpack/test/smoke/template/src/search/index.js');
   
7. 　　    });
   
8. 　　});

复制代码

CircleCI建议用于小型项目，其主要目标是尽快开始集成。
　　当您从事开源项目时，建议使用Travis CI，这些项目应在不同环境中进行测试。
　　Jenkins被推荐用于大型项目，在这些项目中，您需要进行大量自定义，这些自定义可以通过使用各种插件来完成。 您可以在这里更改几乎所有内容，但此过程可能需要一段时间。 如果您计划使用CI系统最快的开始，Jenkins可能不是您的选择。
　　优点：
　　·快速发现错误
　　·防止分支大幅偏离主干
　　核心措施是，代码集成到主干之前，必须通过自动化测试。只要有一个测试用例失败，就不能集成。