什么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. BZOJ_2134_单选错位——期望DP

    BZOJ_2134_单选错位——期望DP 题意: 分析:设A为Ai ∈ [1,ai+1] 的概率,B为Ai = A(imodn+1)的概率显然P(A|B) = 1,那么根据贝叶斯定理P(B) = P( ...

  2. Nginx重新编译添加新模块

    找到nginx的安装包目录,如果没有的话去官网重新下载 查看ngixn版本极其编译参数 /usr/local/nginx/sbin/nginx -V 进入nginx源码目录,重新设置nginx ./c ...

  3. 从Xilinx FFT IP核到OFDM

    笔者在校的科研任务,需要用FPGA搭建OFDM通信系统,而OFDM的核心即是IFFT和FFT运算,因此本文通过Xilinx FFT IP核的使用总结给大家开个头,详细内容可查看官方文档PG109.关于 ...

  4. python 库位置

    l\\Programs\\Python\\Python36\\lib   默认库安装路径 \\Programs\\Python\\Python36\\lib\\site-packages 第三方库安装 ...

  5. Java报错信息 java.lang.SecurityException: Prohibited package name: java.xxx

    package java.yun.System; public class SystemOut { public static void main(String[] args) { System.ou ...

  6. docker环境部署

    docker环境部署 1 查看当前系统版本 只支持CentOS7版本的系统,如果不是的话,可以让项目方进行重装或者系统内核升级. [root@bogon bin]# cat /etc/redhat-r ...

  7. 【转】干货,Kubernetes中的Source Ip机制。

    准备工作 你必须拥有一个正常工作的 Kubernetes 1.5 集群,用来运行本文中的示例.该示例使用一个简单的 nginx webserver 回送它接收到的请求的 HTTP 头中的源 IP 地址 ...

  8. PHP学习笔记 01 之表单传值

    一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...

  9. JPA中自定义的插入、更新、删除方法为什么要添加@Modifying注解和@Transactional注解?

    前几天,有个同事在使用JPA的自定义SQL方法时,程序一直报异常,捣鼓了半天也没能解决,咨询我的时候,我看了一眼他的程序,差不多是这个样子的: @Repository public interface ...

  10. Asp.NetCore轻松学-部署到 Linux 进行托管

    前言 上一篇文章介绍了如何将开发好的 Asp.Net Core 应用程序部署到 IIS,且学习了进程内托管和进程外托管的区别:接下来就要说说应用 Asp.Net Core 的特性(跨平台),将 .Ne ...