Webpack 的简单介绍
本文介绍了一些 webpack 的核心概念以及一些概念术语,并对核心配置做了一些简单的用法讲解。建议刚刚接触 Webpack 的朋友可以先了解一下。想了解更多 Webpack 使用以及配置的话可以参考我的下一篇文章: 从零开始搭建一个 Webpack 开发环境配置(附 Demo)
为什么需要使用 webpack
模块化开发的趋势 我们在开发的过程中,之前都是使用引入 script 的方式进行各种工具和插件的引入,但是这样会造成很大程度上的全局污染,所以引入了 模块化 的概念,但是不管是 commomJs 还是 CMD,AMD 的方式,浏览器都无法识别,而使用 webpack 就可以自动的将文件编译成浏览器可以识别的代码
less、sass 以及 ES6 语法的使用 同样的,直接使用 less、sass 和 ES6 语法,直接使用,浏览器甚至 node 环境也无法正常识别,所以这时候 loader 就派上用场了,可以使用 less-loader、sass-loader 以及 babel-lodaer 对对应的文件进行转换之后,就可以正常的编译了
监听文件的变化并自动刷新网页,做到实时预览
提供 HTTP 服务而不是使用本地文件预览
对于打包后的文件进行压缩,模块拆分,减小打包后的文件体积
等等还有很多别的优势,这里我就不一一列举了
webpack 安装
全局安装:
npm install --global webpack 复制代码
本地安装:
npm install --save-dev webpack npm install --save-dev webpack-cli 复制代码
Webpack 概念
webpack 是一个可高度配置的现代 JavaScript 应用程序模块打包器。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
Webpack 核心概念
入口
入口点可以告诉 webpack 从哪里启动以及遵循依赖关系图,以此知道要打包什么东西。你可以考虑将待打包文件的根目录作为你应用程序的入口点。
个人理解:入口就是 webpack 在处理应用程序时,需要知道从哪个文件开始执行,这个文件就是整个程序的入口文件。
用法:entry: string|Array|Object
基本用法
webpack.config.js
const config = {entry: './src/index.js'
};module.exports = config;
复制代码
数组语法
一般适用于多页面应用,多个入口的场景。
webpack.config.js
const config = {entry: ['./src/entry1', './src/entry2']
};module.exports = config;
复制代码
对象语法
一般适用于分离 应用程序(app) 和 第三方库(vendor) 入口。
webpack.config.js
const config = {entry: {app: './src/app.js',vendors: './src/vendors.js'}
};module.exports = config;
复制代码
配置动态入口
假如项目里有多个页面需要为每个页面的入口配置一个 Entry ,但这些页面的数量可能会不断增长,则这时 Entry 的配置会受到到其他因素的影响导致不能写成静态的值。
webpack.config.js
// 同步函数
entry: () => {return {a:'./pages/a',b:'./pages/b',}
};
// 异步函数
entry: () => {return new Promise((resolve)=>{resolve({a:'./pages/a',b:'./pages/b',});});
};
复制代码
输出
上面既然已经有入口文件了,那么 webpack 执行了一系列操作之后,生成的新的打包后的文件应该放到哪儿呢,所以我们需要指定一下。
在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:
- filename 用于输出文件的文件名
- 目标输出目录 path 的绝对路径
基本用法
webpack.config.js
const path = require('path');const config = {entry: './src/index.js',output: {// 最基本的两个配置要求filename: 'bundle.js', // 输出文件的文件名path: path.resolve(__dirname, 'dist') // 目标输出目录 path 的绝对路径,这里必须是绝对路径}
};module.exports = config;
复制代码
多个入口起点
如果配置创建了多个单独的 "chunk",则应该使用占位符(参考*内置的占位符变量*)来确保每个文件具有唯一的名称。
webpack.config.js
const path = require('path');const config = {output: {// 最基本的两个配置要求filename: '[name]-bundle.js', // 输出文件的文件名path: path.resolve(__dirname, 'dist') // 目标输出目录 path 的绝对路径}
};module.exports = config;
复制代码
内置的占位符变量
变量名 | 含义 |
---|---|
id | Chunk 的唯一标识,从0开始 |
name | Chunk 的名称 |
hash | Chunk 的唯一标识的 Hash 值 |
chunkhash | Chunk 内容的 Hash 值 |
loader
loader 用于对模块的源代码进行转换。loader 可以使你在 import
、require()
或"加载"模块时预处理文件。 loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
基本使用
例如:加载 css 模块:
安装对应的 loader
npm install --save-dev style-loader css-loader 复制代码
然后指示 webpack 对每个 .css 使用 css-loader 和 style-loader
webpack.config.js
``` js
module.exports = {module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader' }]}
};
```
复制代码
配置 loader
rules 配置模块的读取和解析规则,通常用来配置 Loader。其类型是一个数组,数组里每一项都描述了如何去处理部分文件。 配置一项 rules 时大致通过以下方式:
条件匹配:通过 test 、 include 、 exclude 三个配置项来命中 Loader 要应用规则的文件
应用规则:对选中后的文件通过 use 配置项来应用 Loader,可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader,同时还可以分别给 Loader 传入参数
重置顺序:一组 Loader 的执行顺序默认是从右到左(从下到上、从后到前)执行,通过 enforce 选项可以让其中一个 Loader 的执行顺序放到最前或者最后
在 Loader 需要传入很多参数时,你还可以通过一个 Object 来描述
test include exclude 这三个命中文件的配置项可以传入一个字符串或正则,其实它们还都支持数组类型
具体使用:
module.exports = {module: {rules: [{// 命中 JavaScript 文件test: [/\.js?$/,/\.jsx?$/],// 用 babel-loader 转换 JavaScript 文件// ?cacheDirectory 表示传给 babel-loader 的参数,用于缓存 babel 编译结果加快重新编译速度use: [{loader:'babel-loader',options:{cacheDirectory:true,},// enforce:'post' 的含义是把该 Loader 的执行顺序放到最后// enforce 的值还可以是 pre,代表把 Loader 的执行顺序放到最前面enforce:'post'}],// 只命中src目录里的js文件,加快 Webpack 搜索速度include: path.resolve(__dirname, 'src')},{// 命中 SCSS 文件test: /\.scss$/,// 使用一组 Loader 去处理 SCSS 文件。// 处理顺序为从后到前,即先交给 sass-loader 处理,再把结果交给 css-loader 最后再给 style-loader。use: ['style-loader', 'css-loader', 'sass-loader'],// 排除 node_modules 目录下的文件exclude: path.resolve(__dirname, 'node_modules')}]}
};
复制代码
plugins
Plugin 是用来扩展 Webpack 功能的,通过在构建流程里注入钩子实现,它给 Webpack 带来了很大的灵活性。
基本使用
比如每次打包文件到 dist 文件夹下,就可能导致文件夹下面的文件过多,内容过大,那么此时我们可能需要在打包之前先将 dist 文件下的文件都删除掉,但是每次都手动删除岂不是太麻烦,此时我们就可以使用 clean-webpack-plugin 插件来帮助我们清理 dist 文件夹
插件安装
npm install clean-webpack-plugin --save-dev
复制代码
webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {plugins: [new CleanWebpackPlugin(['dist'])]
}
复制代码
其他概念术语
资源(Asset)
这是一个普遍的术语,用于图片、字体、媒体,还有一些其他类型的文件,常用在网站和其他应用程序。这些文件通常最终在输出(output ) 中成为单个文件,但也可以通过一些东西内联,像 style-loader 或者 url-loader 。
Bundle
由多个不同的模块生成,bundles 包含了早已经过加载和编译的最终源文件版本。
Chunk
这是 webpack 特定的术语被用在内部来管理 building 过程。bundle 由 chunk 组成,其中有几种类型(例如,入口 chunk(entry chunk) 和子 chunk(child chunk))。通常 chunk 会直接对应所输出的 bundle,但是有一些配置并不会产生一对一的关系。
依赖关系图(Dependency Graph)
有时候一个文件依赖于其他文件,webpack 将其视为依赖关系(dependency)。从一个或多个入口点开始,webpack 递归构建一个依赖关系图,里面包含了你的应用程序需要的所有模块/资源(mudule/asset)。
模块(Module)
提供比完整程序接触面(surface area)更小的离散功能块。精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
- 模块解析(Module Resolution):一个模块可以作为另一个模块的依赖模块,resolver 是一个库( library )用于帮助找到模块的绝对路径... 模块将在 resolve.modules 中指定的所有目录内搜索。
Tree Shaking
移除未使用/多余的代码,或者更准确地说,只导入引用的代码。编译器(compiler)(例如 webpack)将通过分析各种 import 语句和引入代码的使用情况,来确定哪些部分的依赖关系被实际使用,删除不是“树”的部分,以实现此功能
第三方库入口点(Vendor Entry Point)
从 app.js 和 vendors.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的,允许你使用 CommonsChunkPlugin 从「应用程序 bundle」中提取 vendor 引用(vendor reference) 到 vendor bundle。可以帮助你在 webpack 中实现被称为长效缓存的通用模式。
优化
Bundle 分离(Bundle Splitting) 这个流程提供一个优化 build 的方法,允许 webpack 为应用程序生成多个 bundle。最终效果是,当其他某些 bundle 的改动时,彼此独立的另一些 bundle 都可以不受到影响,减少需要重新发布的代码量,因此由客户端重新下载并利用浏览器缓存。
代码分离(Code Splitting) 指将代码分离到每个 bundles/chunks 里面,你可以按需加载,而不是加载一个包含全部的 bundle。
总结
本文简单介绍了一下 Webpack 的作用以及 Webpack 核心概念的用法。想了解更多的朋友可以参考我的下一篇文章:从零开始搭建一个 Webpack 开发环境配置(附 Demo)
Webpack 的简单介绍相关推荐
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄) ...
- webpack和react_使用React和Webpack进行简单的代码拆分
webpack和react by Didier FRANC 由Didier FRANC 使用React和Webpack进行简单的代码拆分 (Straightforward code splitting ...
- 总结Vue第一天~简单介绍、基本知识、辅助函数和js数组的高阶函数
目录 vue中文官网 一.简单介绍: (1)vue.js :本质就是一个js 核心类库[跟咱使用的其他组件插件而安装他们]: ■ 安装方式: (2)小demo了解一下vue.js: (3)响应式: 二 ...
- 遗传算法的简单介绍以及模式定理的简单证明
遗传算法 遗传算法(Genetic Algorithm,GA),最早是由美国的John holland在20世纪70年代提出.算法通过模拟达尔文生物进化论的自然选择以及遗传学机理的生物进化过程来搜 ...
- 2021年大数据ELK(十八):Beats 简单介绍和FileBeat工作原理
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Beats 简单介绍和FileBeat工作原理 一.Beats 二.FileB ...
- 2021年大数据ELK(十五):Elasticsearch SQL简单介绍
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Elasticsearch SQL简单介绍 一.SQL与Elasticsear ...
- 2021年大数据ELK(二):Elasticsearch简单介绍
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 系列历史文章 一.Elasticsearch简介 1.介绍 2.创始人 二.E ...
- iOS开发UI篇—多控制器和导航控制器简单介绍
iOS开发UI篇-多控制器和导航控制器简单介绍 一.多控制器 一个iOS的app很少只由一个控制器组成,除非这个app极其简单.当app中有多个控制器的时候,我们就需要对这些控制器进行管理 有多个vi ...
- 简单介绍一下R中的几种统计分布及常用模型
统计学上分布有很多,在R中基本都有描述.因能力有限,我们就挑选几个常用的.比较重要的简单介绍一下每种分布的定义,公式,以及在R中的展示. 统计分布每一种分布有四个函数:d――density(密度函数) ...
最新文章
- java的scanner用法_Java Scanner用法详解
- 生信分析平台方案推介,助力科研
- [蓝桥杯][2016年第七届真题]压缩变换(主席树求区间不同数的个数)
- 输入文字自动生成图片_原来Word还可以自动生成图片和图表目录!
- group by 子句的
- 技术人创业建站简略指南(第一季)
- 结对编程-黄金点游戏之旅[二]
- mysql 查询替换语句_MYSQL查询字符替换sql语句
- Unable to launch WebDriverAgent because of xcodebuild failure: “iproxy exited with code ‘234‘“
- Hive3第五章:函数
- TC397 EVADC
- 数据结构-二叉树的定义、创建和周游(前序、中序、后序和层序)
- markdown语法的使用
- 使用canvas画美队盾牌
- 计算机毕业设计Java高校学生综合评价系统(源码+系统+mysql数据库+Lw文档)
- cnpm i 与 npm i
- softmax分类器 matlab,softmax原理及Matlab实现
- Python结合OpenCV视频处理、逐帧修改图片
- Cortex-M3微处理器
- sql依据单个字段去重_sql如何去重查询