10分钟熟练使用webpack

本文详细介绍了Webpack的基本配置方法及参数功能,包括打包入口、出口配置、Loader使用、插件安装与配置等,并覆盖了JS、CSS、LESS、图片等多种资源的处理方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webpack使用场景,基本配置及参数的功能。
新建一个目录,然后npm init初始化这个项目,安装webpack :npm install webpack --save-dev。
webpack打包默认配置文件名:webpack.config.js
官方文档:webpack.github.io/docs/config…
代码:
module.export = { entry : './src/script/main.js', //打包入库从哪个文件开始 output : { //指明打包后文件放到什么位置 path : './dist/js', //打包后的文件放到这个目录下 filename: 'bundle.js' //打包后文件的名字 } }

webpack指定打包配置文件 命令
webpack --config webpack.dev.config.js

配合npm脚本给webpack在命令行使用一些参数。
/package.json


然后在命令行运行 npm run webpack
webpack参数介绍
1.entry 打包入口指示,为了应付各种需求,官方给出三种方式来匹配不同需求。
第一种: 输入简单string指定一个简单入口文件。所有依赖都在这个一个入口文件指定。
第二种:是一个数组 ,webpack为了解决两个平行互相依赖的文件,却想打包到一起。

第三种:是一个对象分key和value。多页面应用程序会运用这个场景。
2.output 打包出口
[name] name占位符
[hash] 哈希值
[checkhash] 类似:保证文件唯一性的哈希值,比如md5值。只有当文件发生改变的时候,这个值会改变。
实际开发项目中
1.webpack插件 html-webpack-plugin
安装 npm install html-webpack-plugin --save-dev
var htmlWepackPlugin = require('html-webapck-plugin') //引用插件
Loader使用
处理项目中的JS
bable-loader转换ES6代码
通过指定Presets来告诉babel loader转换某一些特性
如果转换所有特性可以指定latest(es2015,2016,2017)
怎么指定插件呢
给loader指定一个参数Query parameters
1.require('url-loader?')//?后面跟参数
2.配置文件中
loaders: [ { test: /\.js$/, loader:'babel', query:{ presets:['lastest'] //指定loader } } ]
3.还可以在项目根目录建 .babelrc 配置文件
{
"presets":["es2015"]
}
4.还可以在package.json文件指定

此时配置文件已经告诉webpack通过babel-loader 处理js文件。
module.loaders定义的参数
● test js正则匹配 条件
● exclude loader排除范围,比如某一个目录下不让它处理
● include loader处理的范围
● loader
● loaders 把一长串的loader通过一个数组表示


path是Node的一个api,path对象上有一个方法resolv(解析), dirname是运行环境下的变量,也就是在当前运行环境的路径,后面是相对路径。
dirname)当前的目录,再加个一个相对路径(api/src),解析完后得到一个绝对路径

使用babel-loader来让webpack配置解析es6的js代码,转化成浏览器直接运行的js代码。
处理项目中的CSS
匹配css的正则条件 ,css-loader和style-loader 用!串联起来

postcss loader,后处理css
npm install postcss-loader --save-dev //安装
npm install autoprefixer --save-dev postcss的插件

css的loaer是从右至左执行顺序
设置postcss属性,与module同级,返回postcss的loader需要插件一个列表数组

如果在css中通过@import这个语法引入其他模块或者css也要使用postcss-loader,希望项目下css文件通过统一的方式处理,可以使用postcss-loader的一个参数设置。

处理项目中的LESS文件
安装处理less文件的loader, npm i less-loader --save-dev

项目使用sass同理
处理模板文件
把模板(静态html页面)作为字符串引入进来,通过webpack-loader进行打包
安装 npm install html-loader --save-dev
设置loader匹配规则

实际开发中,模板可能会用到一些模板语法。假设是以.ejs或者.tpl结尾的模板。ejs-loader相关的模板并且会返回给一个已经直接编译好的函数。

配置ejs或者tpl的loader

app.js

处理项目的图片文件
会分为几种情况,第一种情况是css中会有背景图片,第二种情况是html模板结构中引用某一种文件。
npm install file-loader --save-dev
增加对图片的规则loader

如何修改图片打包后的输出地址

安装url-loader npm install url-loader --save-dev
url-loader可以指定一个limit,当图片(文件)大于指定limit值,会将图片(文件)扔给file-loader;当小于limit值,会将图片(文件)转为base64编码。

有两种方式处理项目中引用过来的图片(文件),一种是url方式通过http请求过来的图片,一种就是base64的方式。通过http请求载入过来的图片,可以使浏览器做图片(重复出现)缓存。
如何对通过http请求过来的图片进行压缩
安装 npm install image-webapck-loader --save-dev

压缩后的图片

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值