Pchengineers NPM

wepack + ts 纯开发环境构建

Feature

开发环境构建
- 开发环境热更新加载，及时编译
- typescript 类型系统
生产环境
- es6/es7^转
构建优化

准备

安装

Webpack, Webpack-cli
webpack 模块，核心编译模块
webpack-cli 提供打包，和开发服务。web pack-dev-server 官方两种方式提供本地开发服务，一个是 web pack-dev-server;另外一种情况是 webpack 开启服务
@打包构建部分
clean-webpack-plugin: 清除打包目录
Html-webpack-plugin: 构建开发模板
@文件模块部分
- css: 样式文件打包 loader,包括预处理器语言的处理
- Css: 样式文件拆分
- Css: 兼容性打包构建: posts-loader, autoprefixer
- 媒体文件处理: file-loader, url-loader
@脚本文件兼容打包,babel
babel-loader,
@babel/core
@babel/preset-env
@babel/polyfill
@开发环境工具：
1. 热更新， webpack-dev-server
@开发环境区分
开发环境：
完整得 source map, live-reloading(实时重新加载), hot module replacement(热模块替换)的本地 local server
- 热更新
- 无需压缩代码
- 完整 sourcemap
生产环境任务:
- 代码压缩
- 样式文件提取
- 合理 sourceMap
- 分割代码
生产环境所用工具:
Webpack-merge: 配置合并
Copy-webpack-plugin: 拷贝静态资源将已存在的单个文件或整个目录(public, index, assets/*/)复制到生成目录 dist。
兼容性： copy-webpack-plugin@8.x --> webpack@4.x > Copy-webpack-plugin@9.x --> webpack@5.x
Optimize-css-assets-webpack-plugin 压缩样式文件
Uglifyjs-webpack-plugin: 压缩 js
@ 优化
方向：从配置入手，落实优化概念。主要优化点：包大小，打包效率
具体：
- 优化打包速度
  构建速度包括两方面，开发期间每次修改文件时，热更新速度；以及发布前 build 速度
  解决方案
  1. 合理的设置 mode 参数：webpack 内指定两种模式，dev,prod。prod 模式下会进行 tree shaking 去除无用代码以及 js 脚本混淆，压缩.
  2. 缩小文件搜索范围：
    - 别名配置：用于导入模块是，webpack 查找方式。默认情况下，webpack 会采用向上递归的方式去 node_modules 目录下去找。缩小搜索范围，加快构建速度。
    - include, exclude 选项配置，较少 webpack, 各种 loader 搜索转换时间。
    - extensions: 自定义后缀文件查找文件，评率较高的写在前面. 并且导入模块时，可以不指定后缀。
  3. 开启多进程 loader 转换
    使用 HappyPack 开启多进程 loader 转换。
    在 webpack 构建过程中，实际上耗费时间大多数用在 loader 解析转换以及代码的压缩中。日常开发中我们需要使用 Loader 对 js，css，图片，字体等文件做转换操作，并且转换的文件数据量也是非常大。由于 js 单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。HappyPack 的基本原理是将这部分任务分解到多个子进程中去并行处理，子进程处理完成后把结果发送到主进程中，从而减少总的构建时间
  4. 增强代码压缩
    工具：webpack-parallel-uglify-plugin
  5. 抽离第三方模块
    对于开发项目中不经常会变更的静态依赖文件。类似于我们的elementUi、vue全家桶等等。因为很少会变更，所以我们不希望这些依赖要被集成到每一次的构建逻辑中去。这样做的好处是每次更改我本地代码的文件的时候，webpack只需要打包我项目本身的文件代码，而不会再去编译第三方库。以后只要我们不升级第三方包的时候，那么webpack就不会对这些库去打包，这样可以快速的提高打包的速度。
    webpack 内置插件: DllPlugin DllReferencePlugin
  6. 配置缓存，通常情况下 webpack 构建时，每次都会从新构建。为了提高构建速度可以将较大文件使用缓存。一些 loader 内置缓存设置。默认情况下，缓存写入到了 node_modules/cache 目录下。
    工具: cache-loader
- 优化打包文件体积
  打包速度进行了优化，还需要对打包文件体积优化。较大打包文件，会造成页面加载速度慢，浪费流量等。
  1. 分析打包后文件体积
    Webpack-bundle-analyer:webpack-bundle-analyzer将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容
  2. externals
    按照官方文档的解释，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置Externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用 Externals的方式，将不需要打包的静态资源从构建逻辑中剔除出去，而使用 CDN 的方式，去引用它们。
    有时我们希望我们通过script引入的库，如用 CDN 的方式引入的jquery，我们在使用时，依旧用require的方式来使用，但是却不希望webpack将它又编译进文件中。这里官网案例已经足够清晰明了，大家有兴趣可以点击了解
  3. Tree-shaking
    这里单独提一下tree-shaking,是因为这里有个坑。tree-shaking的主要作用是用来清除代码中无用的部分。目前在webpack4 我们设置mode为production的时候已经自动开启了tree-shaking。但是要想使其生效，生成的代码必须是 ES6 模块。不能使用其它类型的模块如CommonJS之流。如果使用Babel的话，这里有一个小问题，因为Babel的预案（preset）默认会将任何模块类型都转译成CommonJS类型。修正这个问题也很简单，在.babelrc文件或在webpack.config.js文件中设置modules： false就好了
  TODO: 完成自定义 loader, plugin 开发.
NOTE; 生产配置文件设置 mode 时，默认会对脚本文件进行压缩，但是启用对静态文件的压缩时，会破坏 js 压缩。因此需要另外开启压缩工具 ···Uglifyjs-webpack-plugin···。
懒加载 chunk: 通过指定配置文件出口 output 字段属性：chunkFilename
兼容性：
webpack4.x --> html-webpack-plugin 4.x
webpack5.x --> ts-loader8.x
Webpack-clilatest --> webpack5.x
Webpack-dev-server --> webpack4.x
语法语法检查
- Typescript
- ts-loader,
- eslint
- Typescript-eslint
本地安装 typescirpt-cli 工具，初始化配置文件 tsc --int
Tslint:作为 typescript lint 工具。自 2019 起已经被弃用。进而扩展到 eslint 中，用于扩展对 typescript 语法检查。
Eslint-配合 ts 实行 code 检查。
@typescript-eslint-parser:
- 让 eslint 理解 ts 语法
- 必须，否则 eslint 在解析 ts 语法时，会想解析常规 js 语法一样而抛出错误.
@typescript-eslint/eslint-plugin:
- 扩展 eslint 规则，检查 ts 格式。
- Extend:recommented eslint 内置推荐规则集
- @typescript-eslint/recommended： @typescript-eslint/recommented 包官方推荐规则集.
.eslintignore 文件：配置 eslint 忽略的检查文件。
Babel, babel-loader(仅完成对 es2015+语法转换，不包括新 api)，@babel/core, @babel/preset-env, @babel/polyfill(作为开发依赖安装 -S) 。完成对 es2015+ 语法转换，包括 api