webpack

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

其它相似打包工具还有rollup.js 、 parcel、FIS等

webpack可以自动解决模块之间的依赖问题

切记： 各模块不要循环引用

按照webpack的指南**(注意是指南不是概念不是api)**进行针对性的讲解即可，需要被充一下工程化的知识

总结：

1. webpack是当下最流行的资源打包工具，但是在它之前，还有很多的打包工具：

   1. grunt  gulp browserify webpack  rollup FIS...
   

   2. webpack市场有两个版本使用： webpack3.0 webpack4.0

   3. webpack是前端工程化、自动化工具

   4. webpack安装、

      1. 全局

      2. 局部（ 项目目录 ）

      cnpm i webpack webpack-cli -g  // 全局
      cnpm i webpack webpack-cli -D  // 局部
      

   5. webpackREPL环境（ 命令行 ） 基础使用

      1. 命令行输入webpack就会自动寻找目录下的src目录下的index.js文件，将这个文件作为入口文件

2. 环境的选择：

   1. 开发环境（ development ） 源代码编写时所处的环境，这个环境中我们可以看到整个项目的错误日志还有错误警告
      2. 生产 环境（ production ）： 代码会被压缩，错误提示会没有，项目上线时时候

3. 研究webpack的功能

   1. 自动解决依赖性问题（ 某一个模块在其他模块中使用 ）
   2. loader( 转换器)
      1. 功能： 将其他类型文件通过loader编译成js文件

工程化

什么是JS项目工程化

• 版本控制 git svn
• 自动化持续继承、持续交付(CI/CD)
• 代码质量控制(QA)
• 工程化工具 grunt gulp webpack rollup parcel FIS
• 模块化 ：AMD(require.js) CMD(sea.js) Common.js es6
• 文档
• demo

编译过程

自动化处理每次push, tag, release的任务队列

1. 安装
   • 安装 : npm命令行工具
   • 安全审计：npm audit
2. Lint
   • 格式检查: eslint/stylelint
   • 格式化: prettier
3. 测试
   • 测试套装: jest / mocha / ava / kamar
   • 代码覆盖量: nyc / codecov / coveralls
4. 构建
   • 转换器: babel / TS / flow
   • 预处理器: sass / less / postcss/stylus
   • 代码混淆: uglify-js / terser
   • 打包及tree shaking: webpack / rollup / parcel
   • 压缩(gzip等)
   • 复制 / 删除 / 移动文件
   • 检查打包文件的大小
   • 移除无用的代码
5. push
   • 交付: git
   • 发布: npm publish
6. 部署
   • 服务器
     • Pages: git pages
     • 云服务器: aliyun / qcloud / aws
7. Story Book