Webpack的Loader和Plugin的区别

Loader

用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。

loader的使用很简单：

在webpack.config.js中指定loader。module.rules可以指定多个loader，对项目中的各个loader有个全局概览。

loader是运行在NodeJS中，可以用options对象进行配置。plugin可以为loader带来更多特性。loader可以进行压缩，打包，语言翻译等等。

loader从模板路径解析，npm install node_modules。也可以自定义loader，命名XXX-loader。

语言类的处理器loader：CoffeeScript，TypeScript，ESNext（Bable）,Sass,Less,Stylus。任何开发技术栈都可以使用webpack。

Plugin

目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。

webpack功能强大，难点在于它的配置文件，webpack4默认不需要配置文件，可以通过mode选项为webpack指定了一些默认的配置，mode分为：development/production，默认是production。

插件可以携带参数，所以在plugins属性传入new实例。

【Mode】可以在config文件里面配置，也可以在CLI参数中配置：webpack --mode=production（一般会选择在CLI，也就是npm scripts里面进行配置）。

在webpack4以下版本，webpack3.XX，通过plugins进行环境变量的配置。

【resolve】模块，resolver是个库，帮助webpack找到bundle需要引入的模块代码，打包时，webpack使用enhanced-resolve来解析路径。

 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'),
 }
 }

【Manifest】管理所有模块之间的交互。runtime将能够查询模块标识符，检索出背后对应的模块。

问题1：webpack通过使用bundle计算content hash作为文件名称，文件修改，新的content hash执向新的文件，缓存无效，但是文件内容没有修改，计算的hash还是会改变，因为，runtime和manifest的注入在每次构建都会发生变化。要想解决这个文件可以了解更多的runtime和manifest。

webpack原理：从配置文件定义的模块列表开始，处理应用程序，从入口文件开始递归构建一个依赖图，然后将所有模块打包为少量的bundle，通常只有一个，可由浏览器加载。

到此这篇关于Webpack的Loader和Plugin的区别的文章就介绍到这了,更多相关Webpack Loader和Plugin内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 深入webpack打包原理及loader和plugin的实现

    本文讨论的核心内容如下: webpack 进行打包的基本原理 如何自己实现一个 loader 和 plugin 注: 本文使用的 webpack 版本是 v4.43.0 , webpack-cli 版本是 v3.3.11 , node 版本是 v12.14.1 , npm 版本 v6.13.4 (如果你喜欢 yarn 也是可以的),演示用的 chrome 浏览器版本 81.0.4044.129(正式版本) (64 位) 1. webpack打包基本原理 webpack的一个核心功能就是把我们写的

  • 详解webpack loader和plugin编写

    1 基础回顾 首先我们先回顾一下webpack常见配置,因为后面会用到,所以简单介绍一下. 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/' //确保文件资源能够在 http://localhost:3000 下正确访问

  • Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件

    Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • Webpack的Loader和Plugin的区别

    Loader 用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖.loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或者将内联图像转换为data URL.比如说:CSS-Loader,Style-Loader等. loader的使用很简单: 在webpack.config.js中指定loader.module.rules可以指定多个loader,对项目中的各个loader有个全局概览. lo

  • 一文详解webpack中loader与plugin的区别

    目录 一.Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二.Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件 常见的Loader和Plugin loader: plugin: 一.Loader 1.loader的作用: webpack 只能直接处理 javascript 格式的代码.任何非 js 文件都必须被预先处理转换为 js 代码,才可以参与打包.loader(加载器)就是这样一个

  • 详解webpack自定义loader初探

    最近负责的Weex项目涉及到一些构建上的问题,需要通过自定义webpack的loader去实现,于是学习了一下这方面的知识,写一篇文章做个总结,以免遗忘. webpack想必前端圈的人都知道了,大多数人也都或多或少的用过.简单的说就是它能够加载资源文件,并对这些文件进行一些处理,诸如编译.压缩等,最终一起打包到指定的文件中.可以说,它作为一个打包工具,在前端工程化浪潮中,起到了中流砥柱的作用. 那webpack其中非常重要的一环就是,能够对加载的资源文件,进行一些处理.比如把less.sass文

  • Webpack中loader打包各种文件的方法实例

    前言 使用webpack时,在main.js文件中直接使用如下代码导入了style.css文件,控制台中显示如下错误:You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. import './css/style.css'; 原因是,webpack中默认只能打包.js类型文件,无法打包其他类型文件.如果要打包非.js

  • webpack实现一个行内样式px转vw的loader示例

    需求 自从有了postcss来处理css文件,我们可以快速进行网站适配的开发,只需要改改参数,样式按照设计稿的px写,webpack编译自动转换成rem或者vw等. 但是,标签内的px怎么办呢?postcss并不提供转换这个的功能. 探索 启动思路 我正在做一个vue项目,刚好想要实现上面提到的需求,例如下面的例子 <h3 style="font-size: 28px;margin-top: 10px" width="500px">Test</h3

  • webpack源码之loader机制详解

    loader概念 loader是用来加载处理各种形式的资源,本质上是一个函数, 接受文件作为参数,返回转化后的结构. loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中"任务(task)",并提供了处理前端构建步骤的强大方法.loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL.loader

  • 使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的简单用例

    目录 schema.json 插件中的写法 修改报错时输出的信息 结尾 今天来学习如何使用 webpack 官方提供的 schema-utils 库. schema-utils 库用于在 loader 和 plugin 实例化时,对传入的参数进行校验. 如果格式正确,无事发生;如果错误,控制台会显示出比较详细的报错信息,并中断脚本的执行. 我们看个简单的用例: const { validate } = require("schema-utils"); const schema = {

  • webpack file-loader和url-loader的区别

    1.前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的.这就会导致图片引入失败.这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅

随机推荐