webpack初探 - (一)
什么webpack
webpack
是一个模块打包器。webpack
把模块连同它的依赖一起打包生成包含这些模块的静态资源。
安装
在使用webpack
时,建议不要把webpack
安装到全局,如果多个项目同时使用webpack
的时,很有可能会导致因为版本的不同会导致冲突。
这里主要说的的webpack 3.0+
版本。
安装方法
npm install webpack webpack-cli --save-dev
webpack 核心概念
- Entry:入口,在
webpack
执行构建的第一步将从Entry
开始,可抽象输入。 - Module:模块,在
webpack
里一切皆是模块,一个模块对应一个文件,webpack
会从配置的Entry
开始递归找出所有依赖的模块。 - Chunk:代码块,一个
Chunk
由多个模块组合而成,用于代码合并与分割。 - Loader:模块转换器,用于将模块的原内容按照需求转换成新内容。
- Plugin:扩展插件,在
webpack
构建流程中的特定时间注入扩展逻辑,来改变构建结果或做我们想要做的事情。 - Output:输出结果,在
webpack
结果一系列处理并得出最终想要的代码后输出结果。
配置
context
webpack
在寻找相对路径的文件时会以context
为根目录,context
执行启动webpack
时默认为所在的当前工作目录。
context
必须是绝对路径。
const path = require('path');
module.exports = {
context: __dirname
}
Entry
entry
是配置模块的入口,webpack
执行构建的第一步从entry
开始。
entry
类型可以是以下三种中的一种或者互相组合。
const path = require('path');
module.exports = {
// 第一种
// 入口模块的文件路径,可以是相对路径
entry:"./main.js",
// 第二种
// 入口模块的文件路径,可以使相对路径
entry:['./app/entry1','./app/entry2']
// 第三种
// 配置多个入口,每个入口生成一个chunk
entry:{
a:'./app/entry-a',
b:['./app/entry-b1','./app/entry-b2']
}
}
如果是array
类型,则搭配output.library
配置项使用时,只有数组里的最后一个入口文件的模块会被导出。
# chunk
webpack
会为每个生成的chunk
取一个名称,chunk
的名称和entry
的配置有关。
- 如果
entry
是一个String
或Array
,就只会生成一个Array
,就只会生成一个Chunk
,这时Chunk
的名称是main
。 - 如果
Entry
是一个object
,就可以能会出现多个Chunk
,这时Chunk
的名称是Object
键值对中键的名称
Chunk包含信息如下
变量名 含义
id chunk的唯一标识,从0开始
name chunk名称
hash chunk的唯一标识的hash值
chunkhash chunk内容的hash值
# 配置动态Entry
如果一个项目里面需要配置多个页面,然而又需要为这些页面分别配置一个entry
入口,但是这些页面的数量可能会不断的增长,这时entry
的配置会受到其他因素的影响,导致不能写成静态的值。
const path = require('path');
module.exports = {
// 同步函数
entry:() => {
return {
a:'./pages/a',
b:'./pages/b'
}
},
// 异步函数
entry:() => {
return new Promise((resolve) => {
resolve({
a:'./pages/a',
b:'./pages/b'
})
})
}
}
output
output
配置如何输出最终想要的代码。output
是一个object
,里面包含一系列的配置项。
# filename
output.filename
配置输出文件的名称,为string
类型。如果只输出一个文件,则可以将它写成静态不变的。
但是有多个Chunk
要输出时,就需要借助模板和变量,webpack
会为每个Chunk
取一个name
,所以我们可以根据Chunk
的名称来区分输出的文件名。
const path = require('path');
module.exports = {
output:{
// 单个文件
filename:"index.js",
// 多个文件
filename:"[name]_[hash:8].js",
// 根据文件内容的hash值生成文件名,用来浏览器长期缓存文件
filename:"[chunkhash].js"
}
}
hash
和chunkhash
的长度是可指定的,[hash:8]
代表取8位hash
值作为文件名称。
name
代表Chunk
内置的name
去替换掉[name]
,每个要输出的Chunk
都会通过这个函数去拼接输出的文件名称。
# chunkFilename
output.chunkFilename
是用来配置当无入口文件时输出的文件名称。chunkFilename
只用于指定在运行过程中生成的Chunk
在输出时的文件名称。
const path = require('path');
module.exports = {
output:{
// 附加chunk的文件名称
chunkFilename:"[id].js",
chunkFilename:"[chunkhash].js"
}
}
# path
output.path
配置输出文件存放在本地的目录,必须是String
类型的绝对路径。通常通过Node
的path
模块去获取绝对路径。
const path = require('path');
module.exports = {
output:{
path:path.resolve(__dirname,"./dist")
}
}
注意:第二个参数为最终输出到的文件名,如果文件名不存在,则会自行创建一个同名的文件夹,并把导出的文件放到该文件夹里面。
# publicPath
output.publicPath
配置发布到线上资源需的URL
前缀,为string
类型。默认值是空字符串。
const path = require('path');
module.exports = {
output:{
// 放到CDN上
publicPath:'https://cdn.example.com',
// 放到指定目录下
publicPath:"/assets/",
// 放到根目录下
publicPath:""
}
}
output.path
和output.publicPath
都支持字符串模板,内置变量只有hash
一个,代表一次编译操作的hash
的值。
# crossOriginLoading
output.crossOriginLoading
用于配置异步插入的标签的crossorigin
值。
script
标签的crossorigin
的属性可以取以下值:
anonymous
(默认),在加载此脚本资源时不会带上用户的Cookies
。use-credentials
,在加载此脚本资源时会带上用户的Cookies
。
const path = require('path');
module.exports = {
output:{
// 异步加载资源使用方式
// 1.带有Cookies
crossOriginLoading:"anonymous",
// 2.不带Cookies
crossOriginLoading:"use-credentials"
}
}
# libraryTarget和library
使用webpack
去构建一个可以被其他模块导入的库时需要使用到libraryTarget
和library
。
output.libraryTarget
配置以何种方式导出库。
output.library
配置导出库的名称。
他们通常搭配在一起使用。
output.libraryTarget
是字符串的枚举类型。
可选值有:
- umd
- umd2
- commonjs2
- common
- amd
- this
- var
- assign
- window
- global
- jsonp
const path = require('path');
module.exports = {
output:{
// 导出库名称,为String类型
// 不填写时,默认的输出格式是匿名的立即执行函数
library:"myLibrary",
// 导出库的类型,为枚举类型,默认为var
libraryTarget:"umd"
}
}
# libraryExport
output.libraryExport
配置要导出的模块中那些子模块需要被导出。只有output.libraryTarget
被设置成commonjs
或者commonjs2
的时候才有效。
const path = require('path');
module.exports = {
output:{
libraryExport:['a','b']
}
}
lib_code
是指导出库的代码内容,是有返回值的一个自执行函数。
整体配置
在进行配置的时候并不是所有的参数都要填写,而是需用用到哪些就填写哪些参数,总而言之就是根据自己的业务需求去定制自己需要的配置。
const path = require('path');
module.exports = {
context:__dirname,
entry:"./main.js",
output:{
filename:"[chunkhash].js",
path:path.resolve(__dirname,"./dist"),
}
}
webpack初探 - (一)的更多相关文章
- gulp和webpack初探
gulp 真正“流程”化工具 我记得实习刚刚进公司看到grunt,还是有点蒙,之前一直是本地开发,游览器F5,没想到前端也需要“编译工具”.所以grunt一直给我的感觉是“编译工具”,你写的很多代码还 ...
- 【webpack学习笔记(一)】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...
- 【webpack】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...
- webapck学习笔记
该笔记是博主学习webpack课程时做的笔记,里面加了一些自己的一些理解,也踩了一些坑,在笔记中基本上都更正过来了,分享给大家,如果发现什么问题,望告知,非常感谢. 1. 为什么要学webapck 为 ...
- 初探webpack之编写plugin
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 初探webpack之编写loader
初探webpack之编写loader loader加载器是webpack的核心之一,其用于将不同类型的文件转换为webpack可识别的模块,即用于把模块原内容按照需求转换成新内容,用以加载非js模块, ...
- webpack练手项目之easySlide(一):初探webpack (转)
最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力. webpack是一个前端的打包管理工具,大家可以前往:http:/ ...
- 初探webpack之环境配置
先感叹一句,前端的发展真是太快了,ng和bb还没怎么学好就要过时了.现在感觉react当是未来的一个大方向. 以前一直用的grunt,不过前段时间作者已经停止更新了.正好webpack风头正盛,咱也不 ...
随机推荐
- copy.copy()与copy.deepcopy()的详解
copy.copy() 元组和列表调用这个方法效果也不一样. 元组的效果: a = [1,2,3] b = [4,5,6] c = (a,b) e = copy.copy(c) 可以看到:e和c是指向 ...
- 我和Python的Py交易》》》》》》数据类型
Python里的变量 ---门牌 Python在使用变量之前无须定义它的类型,但是必须声明以及初始化该变量. Python中给变量赋值就是声明,初始化变量(也就是创建一个相应数据类型的对象,而那些数据 ...
- Postman----Presets(预先设置)的使用
使用场景: 当我们在进行接口测试post请求时,headers是必填项,我们将一个A接口的headers编写后测试完成,再次进行B接口的测试,需重新编写headers,为了简单操作,我们就用到了Pre ...
- hydra暴力破解ssh服务器密码
概述 我都没想到,第一次暴力破解服务器密码.竟然是对自己的单位服务器出手..囧,因为还没来得及找测试部要来服务器登录密码,测试部负责人已经下班走了.后来又联系不上,这要更新代码,怎么办..于是就对测试 ...
- 干货,不小心执行了rm -f,除了跑路,如何恢复?
前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有bug,呵呵. 那么如果真的删除了不该删除的文件,比如数据库. ...
- SqlServer 将纯数字的时间转换为DateTime
由于数据库存的是整个字符串组到一起了,C#代码是这个样子的. public static string time(DateTime dt) { ) ? ) ? ) ? ) ? ) ? " + ...
- 原生js查询、添加、删除类
1.添加类 为标签添加一个class的类 如:<div id="box" class="box">内容</div> document.g ...
- Android版数据结构与算法(七):赫夫曼树
版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 近期忙着新版本的开发,此外正在回顾C语言,大部分时间没放在数据结构与算法的整理上,所以更新有点慢了,不过既然写了就肯定尽力将这部分完全整理好分享出 ...
- cshtml中正则表达式使用后台代码
//定义变量 bool a = false; //正则表达式 string b = @" ^ (13[0 - 9] | 14[5 | 7] | 15[0 | 1 | 2 | 3 | 5 | ...
- Java虚拟机一:运行时数据区域
java虚拟机在执行java程序的过程中,会把内存划分为若干个不同的数据区域.每个区域都有各自的用途,创建和销毁时间,按照<java虚拟机规范(Java SE 7 版)>的规定,虚拟机运行 ...