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风头正盛,咱也不 ...
随机推荐
- BZOJ_2134_单选错位——期望DP
BZOJ_2134_单选错位——期望DP 题意: 分析:设A为Ai ∈ [1,ai+1] 的概率,B为Ai = A(imodn+1)的概率显然P(A|B) = 1,那么根据贝叶斯定理P(B) = P( ...
- Nginx重新编译添加新模块
找到nginx的安装包目录,如果没有的话去官网重新下载 查看ngixn版本极其编译参数 /usr/local/nginx/sbin/nginx -V 进入nginx源码目录,重新设置nginx ./c ...
- 从Xilinx FFT IP核到OFDM
笔者在校的科研任务,需要用FPGA搭建OFDM通信系统,而OFDM的核心即是IFFT和FFT运算,因此本文通过Xilinx FFT IP核的使用总结给大家开个头,详细内容可查看官方文档PG109.关于 ...
- python 库位置
l\\Programs\\Python\\Python36\\lib 默认库安装路径 \\Programs\\Python\\Python36\\lib\\site-packages 第三方库安装 ...
- Java报错信息 java.lang.SecurityException: Prohibited package name: java.xxx
package java.yun.System; public class SystemOut { public static void main(String[] args) { System.ou ...
- docker环境部署
docker环境部署 1 查看当前系统版本 只支持CentOS7版本的系统,如果不是的话,可以让项目方进行重装或者系统内核升级. [root@bogon bin]# cat /etc/redhat-r ...
- 【转】干货,Kubernetes中的Source Ip机制。
准备工作 你必须拥有一个正常工作的 Kubernetes 1.5 集群,用来运行本文中的示例.该示例使用一个简单的 nginx webserver 回送它接收到的请求的 HTTP 头中的源 IP 地址 ...
- PHP学习笔记 01 之表单传值
一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...
- JPA中自定义的插入、更新、删除方法为什么要添加@Modifying注解和@Transactional注解?
前几天,有个同事在使用JPA的自定义SQL方法时,程序一直报异常,捣鼓了半天也没能解决,咨询我的时候,我看了一眼他的程序,差不多是这个样子的: @Repository public interface ...
- Asp.NetCore轻松学-部署到 Linux 进行托管
前言 上一篇文章介绍了如何将开发好的 Asp.Net Core 应用程序部署到 IIS,且学习了进程内托管和进程外托管的区别:接下来就要说说应用 Asp.Net Core 的特性(跨平台),将 .Ne ...