Webpack

配置字段

entry 入口

output 出口

Module 模块

Chunk 代码块

Loader 模块转换器

Plugins 扩展插件

执行流程

初始化：解析 webpack 配置参数，生产 Compiler 实例；

注册插件：调用插件 apply 方法，给插件传入 compiler 实例的引用，插件通过 compiler 调用 Webpack 提供的 API，让插件可以监听后续的所有事件节点；

读取入口：读取入口文件；

解析文件：使用 loader 将文件解析成抽象语法树 AST；

生成依赖图谱：找出每个文件的依赖项（遍历）；

输出：根据转换好的代码，生成 chunk；

打包：生成最后打包的文件；

Webpack 编译文件过大

webpack打包之后的文件过大的解决方法

1、区分开发环境和生产环境配置；

2、在 prod 环境下关闭 source-map；

3、使用 extract-text-webpack-plugin 插件单独打包 css 文件；

4、使用 UglifyJSPlugin 插件压缩 js 文件；

5、使用 CommonsChunkPlugin 插件提取公共依赖；

6、使用 compression-webpack-plugin 插件开启 gzip 压缩；

7、使用 html-webpack-plugin 插件开启html压缩，自动添加上面生成的静态资源；

8、使用 webpack-bundle-analyzer 插件分析并优化依赖包；

Webpack 编译速度慢

webpack4提升180%编译速度

1、使用 webpack 4 进行打包；

2、配置 externals 来将依赖的库指向全局变量，使 webpack 不再打包这个库，而是全局引入插件后使用；

3、使用 CommonsChunkPlugin 插件将共有的模块打包成一个文件；

Webpack loader

loader API

webpack 用来预处理模块的，在一个模块被引入之前，会预先使用 loader 处理模块的内容。

1、file-loader：打包图片、字体；

2、url-loader：打包图片，会将 base64 打包到 js 文件中；

3、css-loader：理清多个css文件之间的引用关系，最后合并为一个；

4、style-loader：将css样式挂载到head的style标签中；

5、sass-loader：将scss文件编译为css；

6、less-loader：解析 less 文件样式；

7、postcss-loader：为样式加上浏览器前缀；

8、babel-loader：让下一代的 js 文件转换成现代浏览器能够支持的 js 文件；