webpack 构建配置管理的可选方案

发表于:2022-11-24 09:20

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:记忆之城    来源:稀土掘金

分享:
  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 参数控制分支选择。
  团队规模大,选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 可以自动处理空格
  module.exports = {
      "parser": "babel-eslint",
      "extends": "airbnb",
      "env": {
          "browser": true,
          "node": true
      },
      "rules": {
          "indent": ["error", 4]
      }
  };
  冒烟测试
  冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试,这种
  预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。
  ·判断构建是否成功
  const path = require('path');
  const webpack = require('webpack');
  const rimraf = require('rimraf');
  const Mocha = require('mocha');
  const mocha = new Mocha({
      timeout: '10000ms'
  });
  process.chdir(path.join(__dirname, 'template'));
  rimraf('./dist', () => {
      const prodConfig = require('../../lib/webpack.prod.js');
      webpack(prodConfig, (err, stats) => {
          if (err) {
              console.error(err);
              process.exit(2);
          }
          console.log(stats.toString({
              colors: true,
              modules: false,
              children: false
          }));
          console.log('Webpack build success, begin run test.');
          mocha.addFile(path.join(__dirname, 'html-test.js'));
          mocha.addFile(path.join(__dirname, 'css-js-test.js'));
          mocha.run();
      });
  });
  ·判断基本功能是否正常
  const glob = require('glob-all');
  describe('Checking generated html files', () => {
      it('should generate html files', (done) => {
          const files = glob.sync([
              './dist/index.html',
              './dist/search.html'
          ]);
          if (files.length > 0) {
              done();
          } else {
              throw new Error('no html files generated');
          }
      });
  });
  const glob = require('glob-all');
  describe('Checking generated css js files', () => {
      it('should generate css js files', (done) => {
          const files = glob.sync([
              './dist/index_*.js',
              './dist/index_*.css',
              './dist/search_*.js',
              './dist/search_*.css',
          ]);
          if (files.length > 0) {
              done();
          } else {
              throw new Error('no css js files generated');
          }
      });
  });
  单元测试
  ·技术选型:Mocha + Chai
  · 测试代码:describe, it, except
  · 测试命令:mocha  add.test.js
  const assert = require('assert');
  describe('webpack.base.js test case', () => {
      const baseConfig = require('../../lib/webpack.base.js')
      it('entry', () => {
          assert.equal(baseConfig.entry.index, '/Users/cpselvis/my-project/builder-webpack/test/smoke/template/src/index/index.js');
          assert.equal(baseConfig.entry.search, '/Users/cpselvis/my-project/builder-webpack/test/smoke/template/src/search/index.js');
      });
  });
  持续集成的作用(*)
  Travis CI
  CircleCI建议用于小型项目,其主要目标是尽快开始集成。
  当您从事开源项目时,建议使用Travis CI,这些项目应在不同环境中进行测试。
  Jenkins被推荐用于大型项目,在这些项目中,您需要进行大量自定义,这些自定义可以通过使用各种插件来完成。 您可以在这里更改几乎所有内容,但此过程可能需要一段时间。 如果您计划使用CI系统最快的开始,Jenkins可能不是您的选择。
  优点:
  ·快速发现错误
  ·防止分支大幅偏离主干
  核心措施是,代码集成到主干之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。
  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
价值398元的测试课程免费赠送,填问卷领取吧!

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计

法律顾问:上海漕溪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2022
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号