webpack(2)webpack核心概念「建议收藏」

webpack(2)webpack核心概念「建议收藏」前言本质上,webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部构建一个依赖图(dependencygraph),此

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

  本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。接下来我们就会使用webpack来进行打包
 

webpack的概念

在开始前我们需要先理解一些核心概念:

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugin)
  • 模式(mode)
  • 浏览器兼容性(browser compatibility)
  • 环境(environment)
     

入口(entry)

入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

默认值是 ./src/index.js,但你可以通过在 webpack.config.js 文件中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:

module.exports = {
  entry: './path/to/my/entry/file.js',
};

 

单个入口(简写)语法

entry 属性的单个入口语法,参考下面的简写:

// webpack.config.js
module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

 

我们也可以将一个文件路径数组传递给 entry 属性,这将创建一个所谓的 "multi-main entry"。在你想要一次注入多个依赖文件,并且将它们的依赖关系绘制在一个 "chunk" 中时,这种方式就很有用。

// webpack.config.js
module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

总结:当你希望通过一个入口为应用程序或工具快速设置 webpack 配置时,单一入口的语法方式是不错的选择。然而,使用这种语法方式来扩展或调整配置的灵活性不大
 

对象语法

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。

对象可以使用如下属性:

  • dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
  • filename: 指定要输出的文件名称。
  • import: 启动时需加载的模块。
  • library: 指定 library 选项,为当前 entry 构建一个 library
  • runtime: 运行时 chunk 的名字。如果设置了,就会创建一个以这个名字命名的运行时 chunk,否则将使用现有的入口作为运行时。
  • publicPath: 当该入口的输出文件在浏览器中被引用时,为它们指定一个公共 URL 地址。
// webpack.config.js
module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

 

输出(output)

可以通过配置 output 选项,告知 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个 entry 起点,但只能指定一个 output 配置。
 

用法

webpack 配置中,output 属性的最低要求是,将它的值设置为一个对象,然后为将输出文件的文件名配置为一个 output.filename

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

此配置将一个单独的 bundle.js 文件输出到 dist 目录中。
 

多个入口起点

如果配置中创建出多于一个 "chunk"(例如,使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件),则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

// 写入到硬盘:./dist/app.js, ./dist/search.js

 

loader

什么是loader?

  • loaderwebpack中非常核心的一个概念
  • webpack用来做什么?
    • 在我们之前的实例中,我们主要是用webpack来处理js代码,并且webpack会自动处理js中的依赖
    • 但是,在开发中我们不仅仅有js代码要处理,我们也需要加载css、图片,也包括一些高级的将es6转成es5的代码,将Ts转成es5的代码,将scss、less转成css代码等等
    • 对于webpack本身的能力来说,对于这些转化是不支持的
    • 但是我们给webpack扩展对应的loader即可
  • loader的使用过程
    • 步骤一:通过npm安装对应使用的loader
    • 步骤二:在webpack.config.js中的modules关键字进行配置
  • 大部分loader我们都可以在官网中找到,并学习对应的用法
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165734.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 框架结构和砖混结构的区别_react框架官网

    框架结构和砖混结构的区别_react框架官网实现:创建四个组件,分别是头组件,尾组件,list组件,item组件,存在于这个mvc中的。在APP.js中分别引入前三个个组件(item组件是存在于list中的,所以在list中引入item组件)在app.js中写好初始数据,在list中显示出来const{todos}=this.propsreturn(<ul>{todos.map(todo=>{return<Itemkey={

  • LMDB笔记_pdf怎么做笔记

    LMDB笔记_pdf怎么做笔记作为一个计算机底层小白,在了解一个知识点的时候时常需要恶补很多基础知识。本文记录在了解LMDB过程中接触的知识点。LMDB基本架构一个比较官方的解释:lmdb的基本做法是使用mmap文件映射,不管这个文件存储实在内存上还是在持久存储上。lmdb的所有读取操作都是通过mmap将要访问的文件只读的映射到虚拟内存中,直接访问相应的地址.因为使用了read-only的mmap,同样避免了程序错误将存…

  • origin双y轴柱状图_双Y轴柱状图和折线图

    origin双y轴柱状图_双Y轴柱状图和折线图Origin双Y轴柱状图画法及两柱重合有间居问题解决1、所遇问题2、作图方法1、所遇问题做双Y轴柱状图时,一开始是将左Y轴数据和右Y轴数据放在了两个sheet中,一顿操作最后发现两个柱要么重合要么有间距,怎么调都不行,就像下图这样。。。2、作图方法正确作图方法:1、将X数据左Y数据以及右Y数据放在一个sheet中,主要这里边的两个空列,是正确画图的关键。2、选择ABCD四列画柱状图,注意这里C列为误差,画出来图你就明白D列作用是让柱子向左偏一格。3、点击空白区域,右键加入右Y轴,也

  • 大一下学期微积分期末预习(3):定积分的应用-求旋转体的体积

    大一下学期微积分期末预习(3):定积分的应用-求旋转体的体积下面这个是柱壳法,不是注,别问,问就是字写错了。

  • Java是一种什么语言[通俗易懂]

    Java是一种什么语言[通俗易懂]Java是一种计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。Java编程语言的风格十分接近C++语言。继承了C++语言面向对象技术的核心,Java舍弃了C++语言中容易引起错误的指針,改以引用取代,同时移除原C++与原来运算符重载,也移除多重继承特性,改用接口取代,增加垃圾回收器功能。在JavaSE1.5版本中引入了泛型编程、类

  • sublime4 激活码2021【2021.8最新】

    (sublime4 激活码2021)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html83PVI25FMO-eyJsaWNlbnNlSW…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号