webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
其它相似打包工具还有rollup.js 、 parcel、FIS等
webpack可以自动解决模块之间的依赖问题
切记: 各模块不要循环引用
按照webpack的指南**(注意是指南不是概念不是api)**进行针对性的讲解即可,需要被充一下工程化的知识
总结:
-
webpack是当下最流行的资源打包工具,但是在它之前,还有很多的打包工具:
1. grunt gulp browserify webpack rollup FIS...
-
webpack市场有两个版本使用: webpack3.0 webpack4.0
-
webpack是前端工程化、自动化工具
-
webpack安装、
-
全局
-
局部( 项目目录 )
cnpm i webpack webpack-cli -g // 全局 cnpm i webpack webpack-cli -D // 局部
-
-
webpackREPL环境( 命令行 ) 基础使用
- 命令行输入webpack就会自动寻找目录下的src目录下的index.js文件,将这个文件作为入口文件
-
-
环境的选择:
- 开发环境( development ) 源代码编写时所处的环境,这个环境中我们可以看到整个项目的错误日志还有错误警告
- 生产 环境( production ): 代码会被压缩,错误提示会没有,项目上线时时候
- 开发环境( development ) 源代码编写时所处的环境,这个环境中我们可以看到整个项目的错误日志还有错误警告
-
研究webpack的功能
- 自动解决依赖性问题( 某一个模块在其他模块中使用 )
- loader( 转换器)
- 功能: 将其他类型文件通过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的任务队列
- 安装
- 安装 : npm命令行工具
- 安全审计:npm audit
- Lint
- 格式检查: eslint/stylelint
- 格式化: prettier
- 测试
- 测试套装: jest / mocha / ava / kamar
- 代码覆盖量: nyc / codecov / coveralls
- 构建
- 转换器: babel / TS / flow
- 预处理器: sass / less / postcss/stylus
- 代码混淆: uglify-js / terser
- 打包及tree shaking: webpack / rollup / parcel
- 压缩(gzip等)
- 复制 / 删除 / 移动文件
- 检查打包文件的大小
- 移除无用的代码
- push
- 交付: git
- 发布: npm publish
- 部署
- 服务器
- Pages: git pages
- 云服务器: aliyun / qcloud / aws
- 服务器
- Story Book