如何防止网站被注册,大连在建项目,团购网站建设公司,vi手册模板60页结论先行#xff1a;
1、 Loader 和 Plugin 的区别 Loader 也叫做就是“加载器”#xff0c;因为 webpack 原生只能解析 js 文件#xff0c;而对于其他类型文件#xff0c;则需要借助 loader。所以 loader 的作用就是实现对不同格式文件的解析和处理#xff0c;例如把 E…结论先行
1、 Loader 和 Plugin 的区别 Loader 也叫做就是“加载器”因为 webpack 原生只能解析 js 文件而对于其他类型文件则需要借助 loader。所以 loader 的作用就是实现对不同格式文件的解析和处理例如把 ES6 转换成 ES5TypeScript 转换为 JavaScript等使其能够添加到依赖关系中。 Plugin 就是我们常说的插件。主要是扩展 webpack 的功能增加额外的构建任务。例如打包优化、环境变量注入、优化构建速度等它们会运行在 webpack 的不同阶段钩子 / 生命周期贯穿了 webpack 整个编译周期。 2、 常见的 loader 和 plugin 有哪些
常见的 loader
css-loader处理 CSS 文件使其能够在 JavaScript 模块中使用。 加载 CSS支持模块化、压缩、文件导入等特性 style-loader将解析后的 css 用 style 标签挂载到页面的 head 标签中
babel-loader把 ES6 转换成 ES5
file-loader将文件复制到输出目录在代码中通过相对路径去引用输出的文件 (处理图片和字体)
url-loader与 file-loader 类似区别是用户可以设置一个阈值大于阈值会交给 file-loader处理小于阈值时以 base64 的⽅式把⽂件内容注⼊到代码中去(处理图片和字体) eslint-loader通过 ESLint 检查 JavaScript 代码 image-loader加载并且压缩图片文件 常见的 plugin
html-webpack-plugin生成 HTML 文件并自动将打包生成的 JS、CSS 文件注入到 HTML 文件中。
mini-css-extract-plugin分离样式文件将 CSS 提取到单独的⽂件中⽀持按需加载 (替代extract-text-webpack-plugin) terser-webpack-plugin: 支持压缩 ES6 代码(Webpack4)
webpack-bundle-analyzer可视化 webpack 输出文件的体积
webpack-parallel-uglify-plugin多进程执行代码压缩提升构建速度
clean-webpack-plugin 在每次构建前清理输出目录避免旧文件残留。
uglifyjs-webpack-plugin压缩 JavaScript 代码减小文件体积 (Webpack4 以前)
optimize-css-plugin压缩 CSS
define-plugin定义环境变量
允许在编译时创建配置的全局对象 (Webpack4 之后指定 mode 会自动配置) 是一个 webpack 内置的插件不需要安装 copy-webpack-plugin将静态文件复制到输出目录。 如 Vue 的打包过程中如果我们将一些文件放到 public 的目录下那么这个目录会被复制到 dist 文件夹中 具体解析
1、Loader
Webpack 中 loader 的作用是什么常用 loader 有哪些-CSDN博客
Loader 直译为加载器。
Webpack 将一切文件视为模块但是 Webpack 原生是只能解析 js 文件如果想将其他文件也打包的话就会用到 loader。
所以 loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件 的能力。 2、Plugin
Webpack 中 Plugin 的作用是什么常用 plugin 有哪些-CSDN博客
Plugin 直译为插件。
Plugin 可以扩展 webpack 的功能让 webpack 具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件Plugin 可以监听这些事件在合适的时机通过 Webpack 提供的 API 改变输出结果。 3、不同的用法
Loader 在 module.rules 中配置也就是说他作为模块的解析规则而存在。
每个配置项包含了一个或多个规则对象规定了哪些文件需要经过哪些 loader 进行处理。 类型为数组每一项都是一个 Object里面描述了对于什么类型的文件test使用什么加载 (loader) 和使用的参数options Plugin 在 plugins 中单独配置。 类型为数组每一项是一个 plugin 的实例参数都通过构造函数传入。 4、总结
总结起来loader 用于处理模块的转换工作而 plugin 则用于扩展 webpack 的功能增加额外的构建任务。
它们在 webpack 的配置文件中通过不同的配置项进行配置和使用。
