wepack + ts 纯开发环境构建

Feature

1. 开发环境构建

   • 开发环境热更新加载，及时编译
   • typescript 类型系统

2. 生产环境

   • es6/es7^转

3. 构建优化

准备

安装

1. 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。]

   兼容性： [email protected] --> [email protected] > [email protected] --> [email protected]

   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-cli[latest] --> webpack5.x

   Webpack-dev-server --> webpack4.x

2. 语法语法检查

   • 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 忽略的检查文件。

3. Babel, babel-loader(仅完成对 es2015+语法转换，不包括新 api)，@babel/core, @babel/preset-env, @babel/polyfill(作为开发依赖安装 -S) 。完成对 es2015+ 语法转换，包括 api

使用

$ npm i

运行

npm run dev

bundle 分析

npm run analyz

Tips: 此特性需要进入 config, 注入插件。

交流

@pachverb