深入学习webpack以及webpack中有哪些loader及其各自的作用

最新推荐文章于 2022-02-10 16:17:21 发布

原创最新推荐文章于 2022-02-10 16:17:21 发布 · 433 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #less #webpack

vue webpack 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析Webpack配置，包括入口文件配置、输出路径设置、loader处理非JS文件和使用插件的强大功能。重点讲解了file-loader、url-loader、source-map-loader等常见loader的应用。

通常学习webpack总会想到四个重要的概念：
入口（即要打包的入口文件的路径）
出口（即要生成的文件的路径以及文件名）
loader（loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript））
插件（插件接口功能极其强大，可以用来处理各种各样的任务。）

const path=require(‘path’);

module.exports={
entry:’./input.js’,
output:{
path:path.resolve(__dirname,‘dist’),
filename:‘output.bundle.js’
},
mode:‘development’,
module:{
rules:[
{
test:/.(png|jpg|gif)$/i,
use:[
{
loader:‘url-loader’,
options:{
limit:8192
}
}
]
}
]
}
};
在上述代码中entry即为入口文件，output即为出口文件，mode为你要什么模式，通常我们在日常开发中都是development，在产品上线时要改为production，module中说明了你要处理的文件需要用到的规则（test为正则表达式匹配相应的文件，上述test则匹配文件后缀为.png/.jpg/.gif的文件），接着use中说明了使用的loader以及limit(对文件大小的限制，此处最大只能处理8k的图片)

2.loader的类型有很多种，通常我们在使用它们之前都需要安装（npm install xxx-loader --save-dev）

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码

参考官方文档