信息谷 - ICITU

标题: webpack基础学习，各个loader和plugin的具体配置 [打印本页]

作者: sxadmin 时间: 2024-8-6 15:16
标题: webpack基础学习，各个loader和plugin的具体配置
一、邂逅Webpack
Webpack是什么
webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具

静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；

模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；

现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

二、webpack配置和css处理
webpack配置文件
1、出口、入口的配置
我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

module.exports = {
entry: " 指定入口路径",
output: {
filename:"bundle.js", // 出口名字
path: '出口路径'
}
}
2、css-loader的使用
loader是什么

loader 可以用于对模块的源代码进行转换；

我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；

在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；

module.rules的配置如下：

test属性：用于对resource（资源）进行匹配的，通常会设置成正则表达式；

use属性：对应的值时一个数组：[UseEntry]

UseEntry是一个对象，可以通过对象的属性来设置一些其他属性

loader：必须有一个loader属性，对应的值是一个字符串；

options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；

query：目前已经使用options来替代；

传递字符串（如：use: [ 'style-loader' ]）是loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）

欢迎光临信息谷 - ICITU (https://icitu.com/)