webpack入门总结

栏目: JavaScript · 发布时间: 5年前

内容简介:官网:具有一定功能的模块。打包后的文件。

官网: https://www.webpackjs.com/

核心原理

  • 一切皆模块
  • 按需加载

概念

module

具有一定功能的模块。

bundle

打包后的文件。

chunk

打包过程分割的代码块。

Entry

Webpack 会递归的探索出 入口文件中所依赖的模块,并按照顺序 利用 Loader 进行处理。

方式

单入口

1.string

entry: "app.js";

多入口

1.Array<string>

数组中的每一项都会被打包,形成互不依赖的文件

entry: ["app.js","main.js"];

2.object

entry: {
    [entryChunkName]: string | Array<string>
}

对象中的每一个属性都会被打包,形成互不依赖的文件

entry: {
  index:['index.js','app.js'],
  vendor: 'vendor.js'
}

Output

即是你配置了多个入口文件,你也只能有一个输出点。

path

输出文件的目录。

绝对路径

filename

输出的文件名,它一般跟你entry配置相呼应。

单入口

  • 自定义
filename: "[name].bundle.js"

多入口

  • [name].js
  • [id].js, 使用内部 chunk id
  • [hash].js, 使用每次构建过程中,唯一的 hash 生成

在项目中任何一个文件改动后就会被重新创建,然后webpack计算新的hash值

  • [chunkhash].js, 使用基于每个 chunk 内容的 hash

publicPath

公共资源路径

publicPath 应该以/结尾,同时其它 loader 或插件的配置不能以/开头

chunkFilename

块,配置了它,非入口entry的模块,会帮自动拆分文件,也就是大家常说的按需加载,与路由中的 require.ensure相呼应。

resolve

配置模块如何解析。

extensions:自动解析确定的扩展,省去你引入组件时写后缀的麻烦,

alias:非常重要的一个配置,它可以配置一些短路径,

module.rules - 编译规则

rules:也就是之前的loaders,

test : 正则表达式,匹配编译的文件,

exclude:排除特定条件,如通常会写node_modules,即把某些目录/文件过滤掉,

include:它正好与exclude相反,


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Haskell函数式编程基础

Haskell函数式编程基础

Simon Thompson / 科学出版社 / 2013-7-1 / 129.00

《Haskell函数式编程基础(第3版)》是一本非常优秀的Haskell函数式程序设计的入门书,各章依次介绍函数式程序设计的基本概念、编译器和解释器、函数的各种定义方式、简单程序的构造、多态和高阶函数、诸如数组和列表的结构化数据、列表上的原始递归和推理、输入输出的控制处理、类型分类与检测方法、代数数据类型、抽象数据类型、惰性计算等内容。书中包含大量的实例和习题,注重程序测试、程序证明和问题求解,易......一起来看看 《Haskell函数式编程基础》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具