什么webpack

webpack是一个模块打包器。webpack把模块连同它的依赖一起打包生成包含这些模块的静态资源。

安装

在使用webpack时,建议不要把webpack安装到全局,如果多个项目同时使用webpack的时,很有可能会导致因为版本的不同会导致冲突。

这里主要说的的webpack 3.0+版本。

安装方法

npm install webpack webpack-cli --save-dev

webpack 核心概念

  1. Entry:入口,在webpack执行构建的第一步将从Entry开始,可抽象输入。
  2. Module:模块,在webpack里一切皆是模块,一个模块对应一个文件,webpack会从配置的Entry开始递归找出所有依赖的模块。
  3. Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并与分割。
  4. Loader:模块转换器,用于将模块的原内容按照需求转换成新内容。
  5. Plugin:扩展插件,在webpack构建流程中的特定时间注入扩展逻辑,来改变构建结果或做我们想要做的事情。
  6. 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的配置有关。

  1. 如果entry是一个StringArray,就只会生成一个Array,就只会生成一个Chunk,这时Chunk的名称是main
  2. 如果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"
}
}

hashchunkhash的长度是可指定的,[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类型的绝对路径。通常通过Nodepath模块去获取绝对路径。

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.pathoutput.publicPath都支持字符串模板,内置变量只有hash一个,代表一次编译操作的hash的值。

# crossOriginLoading

output.crossOriginLoading用于配置异步插入的标签的crossorigin值。

script标签的crossorigin的属性可以取以下值:

  1. anonymous(默认),在加载此脚本资源时不会带上用户的Cookies
  2. use-credentials,在加载此脚本资源时会带上用户的Cookies
const path = require('path');
module.exports = {
output:{
// 异步加载资源使用方式
// 1.带有Cookies
crossOriginLoading:"anonymous",
// 2.不带Cookies
crossOriginLoading:"use-credentials"
}
}

# libraryTarget和library

使用webpack去构建一个可以被其他模块导入的库时需要使用到libraryTargetlibrary

output.libraryTarget配置以何种方式导出库。

output.library配置导出库的名称。

他们通常搭配在一起使用。

output.libraryTarget是字符串的枚举类型。

可选值有:

  1. umd
  2. umd2
  3. commonjs2
  4. common
  5. amd
  6. this
  7. var
  8. assign
  9. window
  10. global
  11. 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初探 - (一)的更多相关文章

  1. gulp和webpack初探

    gulp 真正“流程”化工具 我记得实习刚刚进公司看到grunt,还是有点蒙,之前一直是本地开发,游览器F5,没想到前端也需要“编译工具”.所以grunt一直给我的感觉是“编译工具”,你写的很多代码还 ...

  2. 【webpack学习笔记(一)】流行的前端模块化工具webpack初探

    从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...

  3. 【webpack】流行的前端模块化工具webpack初探

    从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...

  4. webapck学习笔记

    该笔记是博主学习webpack课程时做的笔记,里面加了一些自己的一些理解,也踩了一些坑,在笔记中基本上都更正过来了,分享给大家,如果发现什么问题,望告知,非常感谢. 1. 为什么要学webapck 为 ...

  5. 初探webpack之编写plugin

    初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...

  6. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  7. 初探webpack之编写loader

    初探webpack之编写loader loader加载器是webpack的核心之一,其用于将不同类型的文件转换为webpack可识别的模块,即用于把模块原内容按照需求转换成新内容,用以加载非js模块, ...

  8. webpack练手项目之easySlide(一):初探webpack (转)

    最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力.     webpack是一个前端的打包管理工具,大家可以前往:http:/ ...

  9. 初探webpack之环境配置

    先感叹一句,前端的发展真是太快了,ng和bb还没怎么学好就要过时了.现在感觉react当是未来的一个大方向. 以前一直用的grunt,不过前段时间作者已经停止更新了.正好webpack风头正盛,咱也不 ...

随机推荐

  1. copy.copy()与copy.deepcopy()的详解

    copy.copy() 元组和列表调用这个方法效果也不一样. 元组的效果: a = [1,2,3] b = [4,5,6] c = (a,b) e = copy.copy(c) 可以看到:e和c是指向 ...

  2. 我和Python的Py交易》》》》》》数据类型

    Python里的变量 ---门牌 Python在使用变量之前无须定义它的类型,但是必须声明以及初始化该变量. Python中给变量赋值就是声明,初始化变量(也就是创建一个相应数据类型的对象,而那些数据 ...

  3. Postman----Presets(预先设置)的使用

    使用场景: 当我们在进行接口测试post请求时,headers是必填项,我们将一个A接口的headers编写后测试完成,再次进行B接口的测试,需重新编写headers,为了简单操作,我们就用到了Pre ...

  4. hydra暴力破解ssh服务器密码

    概述 我都没想到,第一次暴力破解服务器密码.竟然是对自己的单位服务器出手..囧,因为还没来得及找测试部要来服务器登录密码,测试部负责人已经下班走了.后来又联系不上,这要更新代码,怎么办..于是就对测试 ...

  5. 干货,不小心执行了rm -f,除了跑路,如何恢复?

    前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有bug,呵呵. 那么如果真的删除了不该删除的文件,比如数据库. ...

  6. SqlServer 将纯数字的时间转换为DateTime

    由于数据库存的是整个字符串组到一起了,C#代码是这个样子的. public static string time(DateTime dt) { ) ? ) ? ) ? ) ? ) ? " + ...

  7. 原生js查询、添加、删除类

    1.添加类 为标签添加一个class的类 如:<div id="box" class="box">内容</div> document.g ...

  8. Android版数据结构与算法(七):赫夫曼树

    版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 近期忙着新版本的开发,此外正在回顾C语言,大部分时间没放在数据结构与算法的整理上,所以更新有点慢了,不过既然写了就肯定尽力将这部分完全整理好分享出 ...

  9. cshtml中正则表达式使用后台代码

    //定义变量 bool a = false; //正则表达式 string b = @" ^ (13[0 - 9] | 14[5 | 7] | 15[0 | 1 | 2 | 3 | 5 | ...

  10. Java虚拟机一:运行时数据区域

    java虚拟机在执行java程序的过程中,会把内存划分为若干个不同的数据区域.每个区域都有各自的用途,创建和销毁时间,按照<java虚拟机规范(Java SE 7 版)>的规定,虚拟机运行 ...