webpack(1)-简介和基础知识

webpack

一：webpack是什么
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

二：webpack的作用
webpack用来将项目中的各个引用模块进行打包封装。由于浏览器只能识别特定的js，html，css，当项目使用到了其他浏览器不能识别的语言时，webpack的作用就是将某种语言翻译成为浏览器可以识别的语言。另外一个作用就是，项目文件引入了一些其他资源，webpack可以将它整和到目标文件中，例如import引入的一些文件，引入的文件是怎么在项目中产生作用的呢？就是通过webpack 将文件整和到一个文件中，使一些离散的文件得到整和从而产生作用。

三：webpack的几个核心知识点
1，webpack都是从起点文件index.js开始打包的，这样的打包结构类似于树型结构，通过遍历使每一个引用文件都得到打包或翻译打包，所以只有在index.js中或者项目树型结构中引用了文件才可。
2，webpack中的webpack.config.js配置文件
这个文件就是webpack的配置文件，webpack自身只能将js，json文件进行打包，而对css,less,sass,jpg,png,gif,字体样式，其他语言webpack是不支持的，但是可以通过给webpack配置一些功能，可以使的webpack可以处理打包这样的文件。每声明一种打包功能都必须在webpack.config.js文件中进行配置声明。（所以webpack大部分代码都是在webpack.config.js文件中编写）
3，webpack.config.js配置文件中的几个重要部分

下面介绍几个核心基础功能
entry：打包入口起点
1：string --》./src/index.js
单入口
打包形成一个chunk，输出一个bundle文件
当没有指定文件输出名字时，默认是main
2：array --》[ ‘./src/index.js’,’./src/add.js’]
多入口
所有文件最终只会形成一个chunk，输出一个bundle文件
就是数组里面的js文件会合并成为一个js文件输出
3：objeck --》{}
多入口
有几个文件就生成几个chunk，输出几个bundle文件
此时chunk文件名为key值

–特殊用法（object和array联用）
{
index:[’./src/index.js’,’./src/count.js’],
add:’./src/add.js’
}

output :输出
filename：输出文件名或者目录下文件名
path：输出的公共文件路径

loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
module:{
rules:{//配置执行的循序是从左往右，从下往上
test:/.js$/,
//排除一下文件
exclude:/node_modules/,
//只检查该目录下面的文件
include:resolve(__dirname,‘src’),
//优先执行
enforce:‘pre’,
//延后执行
enforce:‘post’,
loader:‘eslint-loader’
}
{
//以下配置只匹配一个
oneOf:[]
}

plugins：插件功能，是对loader的一种完善，能够处理loader不能处理的一些功能，使用：想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

mode：模式
项目开发有两种模式，一种是开发模式（development），另外一种就是生产模式（production），开发模式就是用来编写代码，打包后没有对代码进行压缩，生产模式是对代码进行了压缩，并对一些功能进行了优化。

注意：
//两种外部配置使用方法：
loader：1，下载（npm） 2，应用
plugin：1，下载（npm） 2，引入 3，应用

实例：

//利用node 中的模块获得绝对路径
const {resolve}=require('path');
//将插件引入
const HtmlWebPackPlugin=require('html-webpack-plugin')module.exports={entry:'./src/index.js',output:{//打包后的文件名filename:'built.js',//打包后文件的路径path:resolve(__dirname,'build')},module:{rules:[//详细的loader配置,处理一种情况，就得添加一个相对应的对象{test:/\.css$/,//当需要依赖多个loader时使use数组，只需要使用一个时使用loader标签use:[//创建一个style标签，将js中的样式资源插入并添加到head标签中'style-loader',//将css文件变成commonjs模块加载到js中，里面的内容是样式字符串'css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]},plugins:[//插件配置new HtmlWebPackPlugin({//打包html文件，并以template下的html文件为模板生成一个引入了打包后的js文件的html文件template:'./src/index.html'})],//指示打包为开发环境打包mode:'development'
}

webpack(1)-简介和基础知识相关推荐

DL：深度学习(神经网络)的简介、基础知识(神经元/感知机、训练策略、预测原理)、算法分类、经典案例应用之详细攻略
DL:深度学习(神经网络)的简介.基础知识(神经元/感知机.训练策略.预测原理).算法分类.经典案例应用之详细攻略目录深度学习(神经网络)的简介 1.深度学习浪潮兴起的三大因素深度学习(神经网络 ...
PyTorch学习笔记（二）：PyTorch简介与基础知识
往期学习资料推荐: 1.Pytorch实战笔记_GoAI的博客-CSDN博客 2.Pytorch入门教程_GoAI的博客-CSDN博客本系列目录: PyTorch学习笔记(一):PyTorch环境安 ...
Linq的简介和基础知识学习
学习LINQ之前,我们要知道LINQ是干什么,解决什么问题的,怎样学习? 一.LINQ简介 1.什么是LINQ? 什么是LINQ?LINQ中文翻译为语言集成查询(Language Integrated ...
lwip简介及基础知识
简介 1. 介绍 LwIP 全名:Light weight IP,意思是轻量化的 TCP/IP 协议,是瑞典计算机科学院 (SICS) 的 AdamDunkels 开发的一个小型开源的 TCP/IP ...
JavaScript简介及基础知识(1)
1.JavaScript是什么-它是个脚本语言,需要宿主文件,它的宿主文件是html文件. Javascript是一种脚本语言,比HTML要复杂.不过即便你先前不懂编程,也不用担心,因为Javascr ...
形式语言与自动机 1.课堂简介，基础知识
学这个是干嘛的: 课程路线: 语言是什么: 形式语言是什么: 自动机是啥: 接下来是正式的基本概念: 字母表: 都是有穷的哈. 字符串,空串和一些约定: 注意:空串不是字符,是特殊的字符串,所以当然不 ...
Android Systrace 基础知识(9)-MainThread 和 RenderThread 解读
本文是 Systrace 系列文章的第九篇,主要是是介绍 Android App 中的 MainThread 和 RenderThread,也就是大家熟悉的「主线程」和「渲染线程」.文章会从 Syst ...
FFmpeg 基础知识
第一.FFmpeg 简介和基础知识 1.1 FFmpeg 简介 FFmpeg的名称来自MPEG视频编码标准,前面的"FF"代表"Fast Forward",FF ...
Java基础知识强化之集合框架笔记76：ConcurrentHashMap之 ConcurrentHashMap简介
1. ConcurrentHashMap简介: ConcurrentHashMap是一个线程安全的Hash Table,它的主要功能是提供了一组和Hashtable功能相同但是线程安全的方法.Conc ...

webpack(1)-简介和基础知识

webpack

webpack(1)-简介和基础知识相关推荐

最新文章

热门文章