# wp-cli

**Repository Path**: zhufengSpace/wp-cli

## Basic Information

- **Project Name**: wp-cli
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

####webpack功能：
1. 代码转换：Typescript、React、Vue转化为javascript、Sass、Less 转化为Css等。
2. 文件优化：压缩js、html、css代码，压缩合并图片等。
3. 代码分割：提取多个页面的公共代码、提取首屏不需要执行的代码让其异步加载。
4. 模块合并：模块化开发的项目中会有多个模块和文件，需要构建功能把模块分类合并成一个文件。
5. 自动刷新：监听本地代码变化，自动重新构建、刷新浏览器。
6. 代码校检：在代码提交到仓库前需要校检代码是否符合规范，以及单元测试是否通过。
7. 自动发布：代码更新后、自动构建出线上发布的代码并自动传输给发布系统。

####webpack核心概念
- Entry：入口,webpack执行构建的第一步将从Entry开始。
- Output: 输出结果
- Loader：模块转换器
- Plugin：扩展插件
- Module：模块
- Chunk: 代码块
- Context: 项目打包的路劲上下文，如果指定了contenxt那么entry和output都是相对于上下文路径，context必须是一个绝对路径。

####指纹
- [hash]  是整个项目的hash值，其根据每次编译内容计算得到，每次编译之后都会生成新的hash,即修改任何文件都会导致所有文件的hash发生改变，在一个项目中虽然入口不同，但是hash是相同的，hash无法实现前端静态资源的浏览器长缓存，如果有这个需求应该使用chunkhash
- [chunkhash] 根据entry入口文件进行依赖文件解析、构建对应的chunk 生成对应的hash值
- [contenthash] 使用chunkhash存在一个问题，就是当在一个JS文件中引入CSS文件，编译后它们的hash是相同的，而且只要js文件发生改变 ，关联的css文件hash也会改变,这个时候可以使用mini-css-extract-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建

####Loader-常用loader
> 样式类
  style-loader；
  css-loader；
  sass-loader;
  less-loader;
  postcss-loader 调用autoprefixer增加css 前缀

>图片文件类
  file-loader
  url-loader

Plugin-常用插件
> html-webpack-plugin  通过模板文件自动产出html
mini-css-extract-plugin   抽离css到单独的文件中
html-inline-css-webpack-plugin 抽离的css转为静态的内联css style-loader将css转为为js模块在程序运行时动态导入css
terser-webpack-plugin 压缩css支持es6语法
optimize-css-assets-webpack-plugin 压缩css
webpack.ProvidePlugin  webpack配置ProvidePlugin后，在使用时将不再需要import和require进行引入，直接使用即可
clean-webpack-plugin  打包前先清空输出目录
webpack.IgnorePlugin IgnorePlugin用于忽略某些特定的模块，让 webpack 不把这些指定的模块打包进去