webpack相关

目录

一：运行指令

①开发环境指令：

②生产环境指令：

二：webpack配置文件的

三：webpack和gulp区别

四：常见的plugin和常见的loader

五：介绍bundle，chunk，module是什么

---

一：运行指令

①开发环境指令：

webpack src/js/index.js -o build/js/built.js --mode=development

功能：

webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成 浏览器能识别的语法。

②生产环境指令：

webpack src/js/index.js -o build/js/built.js --mode=production

功能：

在开发配置功能上多一个功能，压缩代码。

二：webpack配置文件的

官网链接     ，   学习链接

三：webpack和gulp区别

四：常见的plugin和常见的loader

　　plugin:
　　html-webpack-plugin 为html文件中引入的外部资源，可以生成创建html入口文件
　　mini-css-extract-plugin 分离css文件
　　clean-webpack-plugin 删除打包文件
　　HotModuleReplacementPlugin 模块热更新(代码修改过后不用刷新浏览器就可以更新)
　　copy-webpack-plugin 拷贝静态文件
　　terser-webpack-plugin 通过TerserPlugin压缩ES6代码

　　loader:
　　css-loader 加载 CSS，支持模块化、压缩、文件导入等特性                                            　　style-loader 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
　　file-loader 把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件               url-loader 与file-loader功能几乎一致，优势是可以对图片进行动态转换base64编码（控制limit属性值可以控制阈值）。url-loader应用比file-loader广泛，且url-loader是file-loader的上层封装。
　　babel-loader 把 ES6 转换成 ES5                                                                                       　　       esint-loader对项目中的js语法进行检查。    
　　source-map-loader 加载额外的 Source Map 文件，以方便断点调试

五：介绍bundle，chunk，module是什么

chunk是打包过程中的代码块 ， 是一堆module的集合 ； bundle是打包完成生成的代码 。

　　bundle:是由webpack打包出来的文件
　　chunk:代码块，一个chunk由多个模块组合而成，用于代码的合并和分割
　　module:是开发中的单个模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块