Webpack 打包---流程和loader
Posted michael_yqs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 打包---流程和loader相关的知识,希望对你有一定的参考价值。
为什么要模块化?
- ES Modules 存在环境兼容问题
- 模块文件过多,网络请求频繁
- 所有的前端资源都需要模块化
主流模块打包工具:webpack(适用于大型应用)、parcel(小型应用,快速开发测试demo)、rollup(适用于单模块开发)
webpack 配置文件
webpack.config.js
module.exports =
entry: './src/index.js', // 入口文件:相对路径不能省略 ./
output: // 输出配置
filename: 'bundle.js', // 打包后的文件名
path: path.join(__dirname, 'dist') // 打包输出路径:需要绝对路径
,
webpack 的工作模式: mode
- production 生产模式:打包、压缩代码
- development 开发模式:优化打包效率,添加调试辅助
- none 运行最原始的打包,不会做额外的处理
webpack构建流程
webpack是运行在nodejs环境下,配置文件遵循commonjs规范。其配置文件webpack.config.js导出一个object/function/promise/array。 Webpack在启动后,会从entry开始,递归解析entry依赖的所有Module,每找到一个Module,就会根据Module.rules里配置的Loader规则进行相应的转换处理,对Module进行转换后,再解析出当前Module依赖的Module,这些Module会以entry为单位进行分组,即为一个Chunk。因此一个Chunk,就是一个entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中,Webpack会在恰当的时机执行Plugin里定义的逻辑,从而完成Plugin插件的优化任务。其流程如下:
-
配置初始化
webpack会首先读取配置文件,执行默认配置 -
编译前准备
webpack 会实例化compiler,注册plugins、resolverFactory、hooks。 -
reslove前准备
webpack 实例化compilation、NormalModuleFactory和ContextModuleFactory -
reslove流程
解析文件的路径信息以及inline loader和配置的loader合并、排序 -
构建module
runLoaders处理源码,得到一个编译后的字符串或buffer。将文件解析为ast,分析module间的依赖关系,递归解析依赖文件 -
生成chunk
实例化chunk并生成chunk graph,设置module id,chunk id,hash等 -
资源构建
使用不同的template渲染chunk资源 -
文件生成
创建目标文件夹及文件并将资源写入,打印构建信息
加载器(loader)
webpack 默认的 loader 是只能处理js,其他类型资源可以使用相应的 loader ,如css -loader,html-loader。常用的加载器分为三类:编译转换类、
文件操作类、代码检查类。下面列举几个常见的文件操作类加载器。
CSS 资源 - css-loader、style-loader
- css-loader 会将 css 文件打包成一个 js 模块,将 js 文件作为 webpack 的入口文件,然后在 js 文件中通过 import 的方式引入 css 文件
- style-loader 将 css-loader 转换过的代码通过 style 标签的形式追加到页面上
const path = require('path')
module.exports =
mode: 'none',
entry: './src/index.js',
output:
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath:'dist/'
,
module:
rules: [ // 其他资源模块加载规则的配置
test: /.css$/, // 匹配打包过程中遇到的文件路径
use: [ // 指定匹配到的文件需要使用的 loader。
// 如果有多个loader,webpack会从后往前执行loader,所以这里要先调用css-loader把css代码转换成js代码
'style-loader',
'css-loader'
]
]
文件资源加载器 file-loader 适合体积较大的文件
对于体积较大的文件,使用文件提取的方式,提高加载速度
将文件拷贝到打包目录,然后将拷贝后的路径作为返回值返回。使用模块的导出成员获取这个资源的访问路径,需要配置 打包后资源的位置
module.exports =
output:
publicPath: 'dist/' // 资源路径,默认为 '' 即 /
,
module:
rules: [
test: /.png$/,
use: 'file-loader'
]
url-loader 适合体积较小的文件
对于体积较小的文件,使用data-url的方式,减少请求次数
module.exports =
output:
publicPath: 'dist/' // 资源路径,默认为 '' 即 /
,
module:
rules: [
test: /.png$/,
use:
loader: 'url-loader',
options:
limit: 10 * 1024 // 只对 10KB 以下的文件做 data-url 转换,
// 超过的文件交给 file-loader 处理(webpack会默认调用 file-loader)
]
手写loader--------markdown-loader
loader其实是一个工作管道,通过某种特定的方式把输入转换成输出,这个输出可以是一段可以执行的js代码,也可以是一个可供其他loader(管道)使用的中间结果。
自定义loader的编写分为两步:
- 创建 markdown-loader.js 文件
- markdown-loader.js 导出一个函数,这个函数就是这个loader对加载到的资源的处理过程。输入是资源文件加载到的内容;输出就是此次加工过后的结果。这个结果可以有两种:1.可以执行的js代码 2.返回一个可供其他loader处理的结果
markdown-loader.js
const marked = require('marked');//marked用来处理 markdown 文件
module.exports = source =>
const html = marked(source);
// 1. 将html stringify,转义 引号和换行符 ,再导出
return `module.exports = $JSON.stringify(html)`
// 2. 直接返回 html 字符串,将结果交给下一个 loader 处理
//return html
webpack.config.js中增加loader配置
//webpack.config.js中增加loader配置
module.exports =
//....其他配置已省略
module:
rules: [
//...其他配置已省略
test: /.md$/,
use: [
'html-loader',
'./markdown-loader' // 使用相对路径找到 markdown-loader
]
]
以上是关于Webpack 打包---流程和loader的主要内容,如果未能解决你的问题,请参考以下文章