今天目标:
-
能够安装webpack
-
能够配置打包模式、入口和出口文件
-
能够编译index.html模板页面
-
能够配置实时打包功能
-
能够安装配置使用css相关loader
-
能够安装配置使用less相关loader
-
能够安装配置使用img相关loader
-
能够安装配置使用babel相关loader
commonjs : module.exports = 对象 var 名称 = require(xxx) nodejs
es6模块化: export default 对象 import 名称 from 'xx'
amd: define() define
cmd
介绍
什么是:
webpack是项目的打包机器
webpack可以一次性对项目内部全部的less、es6、es7做"编码降级"处理,非常高效
准确定义:
WebPack可以看做是模块打包机器,它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(less、es6、es7等),并将其打包为合适的格式以供所有浏览器使用。
本身是通过nodejs开发的
项目开发:
html、css、js
less、es6、es7 浏览器不能直接运行,less需要编译器变为普通css才可以给浏览器运行,es6、es7在高端浏览器可以运行,中低端不保证,为了全部浏览器都可以运行es6/es7的内容,那么其要降级为es5标准
以上less/es6/es7为了兼容性、可执行性更好,需要编码、降级处理,它们如果逐个编码、降级处理会使得项目开发效率降低
什么地方适合使用
适合场景:
-
spa项目(单页面应用程序项目),例如黑马自媒体(后台系统),移动端项目(前台系统)
项目特点:被请求执行的页面数量小于500个
-
vue、react、angular都可以使用webpack
隔行换色案例
目标:给一系列li标签设置隔行换色效果
步骤:
-
创建空的项目运行目录 01-web
-
给该项目创建package.json文件, yarn -y init
-
给项目安装jquery依赖包, yarn add jquery
-
给项目创建运行目录 src,并在其中创建 index.html和 index.js文件,它们内容如下
-
案例运行效果:
注意:
项目代码文件名称为index.js 和 index.html ,暂时是必须的
它们的公共目录名称为src,暂时是必须的
安装配置
对webpack进行安装配置
官网:https://webpack.docschina.org/
步骤:
-
安装两个依赖包 , yarn add webpack webpack-cli -D
-
在package.json中做配置,内容如下:
"scripts":{
"build":"webpack"
},
现在在命令行中可以执行 npm run build 做webpack打包处理
scripts是固定的配置结构
以上各个单词通过“双引号”圈选,本质是json部分
打包实现
目标:
把隔行换色中核心js文件(jquery.js 和 index.js) 做打包变成一个文件
步骤:
-
src/index.html文件中不要引入jquery.js文件了
-
在src/index.js中 通过 import $ from 'jquery' 方式引入
-
webpack打包, npm run build,
打包完毕,会生成dist目录,里边的main.js文件就是 jquery 和 index.js 的合成体
-
现在在src/index.html中只引入一个dist/main.js文件即可(之前是引入两个)
<!-- <script src="../node_modules/jquery/dist/jquery.js" type="text/javascript"></script> -->
<!-- <script src="./index.js" type="text/javascript"></script> -->
<script src="../dist/main.js" type="text/javascript"></script>
src/index.js 就项目主入口文件(类似自媒体的 src/main.js)
src/index.html 就是项目的主模板文件 (类似自媒体 的 public/index.html)
运行依赖和开发依赖
依赖包安装有两种方式:
yarn add jquery // 安装运行依赖包
yarn add webpack -D // 安装开发依赖包
运行依赖包标志为 --save 或简称为 -S ,现在不设置就是默认项目
运行依赖包标志为 --save-dev 或简称为 -D
一般在主入口文件中需要做import引入的,都是运行依赖包
在主入口文件不需要引入的,是工具级的依赖包,都通过 开发依赖方式安装
它们安装完毕在package.json中会形成如下效果:
以上不同类型依赖包有区分
好处是:
这个项目被其他人获取到,可以根据需要安装相关的依赖包
-
如果这个新作者只需要运行项目,就单独安装全部的运行依赖包即可,不要安装开发依赖包(项目体积会减小,运行速度快)
yarn --production
-
如果这个新作者不仅需要运行项目还要对项目做二次开发,就安装全部的依赖包(运行和开发)
yarn
开发依赖、运行依赖针对当前的vue中的webpack项目体现不明显,在nodejs中体现明显
问:依赖包如何区分是开发的还是运行的:答:在 src/index.js 入口文件中通过require(或es6 import)引入的就是运行依赖包,否则是开发依赖包
配置打包模式
webpack打包模式需要配置,否则会黄色信息warning警告提示
步骤:
-
根目录创建webpack的配置文件,名称为webpack.config.js
-
配置如下信息:
module.exports = {
// 不是json语法,不用设置双引号圈选每一个项目,就是普通对象
mode: "development" // development production
}
production: 生成模式,打包后的文件是压缩优化的
development:开发调试模式,打包后的文件有适当的空白、注释、回车
前期使用 development 开发模式
配置入口和出口文件
入口文件默认为:src/index.js
出口文件默认为:dist/main.js
如果需要可以对它们进行配置,配置后为:
入口文件为:src/main.js
出口文件为:dist/chunk.js
步骤:
-
把src/index.js 改为 src/main.js
-
在webpack.config.js中做如下配置:
// 引入path
var ph = require('path')
module.exports = {
// 不是json语法,不用设置双引号圈选每一个项目,就是普通对象
mode: "development", // development production
// 给项目配置主入口文件
entry: './src/main.js',
// 给项目配置出口文件(打包后)
output: {
// 出口文件目录
path: ph.resolve('./dist'),
// 出口文件名字
filename: 'chunk.js'
}
}
-
打包效果(npm run build):
通过绝对路径引入一个文件
ph.join(__dirname,'./dist') E:\Vue75\75everyday\09day\01-web\dist
ph.resolve('./dist'), E:\Vue75\75everyday\09day\01-web\dist
resolve较比join省去了__dirname,一样可以获得文件的绝对路径
编译模板页面
项目文件做打包后,需要我们“手动”在模板文件(src/index.html)中引入 打包好的js文件(dist/chunk.js)
webpack本身可以安装功能插件(HtmlWebpackPlugin),其作用为:
对src/index.html文件也做"打包(复制)"处理,并生成在dist目录下,然后自动把chunk.js文件 给引入进来
安装使用步骤:
-
安装, yarn add html-webpack-plugin -D
-
在webpack.config.js中做配置
webpack配置文件中其他的模块需要通过require方式引入,不能使用import,因为webpack是nodejs开发的,需要使用commonjs模块化方案
-
在src/index.html源模板文件中可以把../dist/chunk.js引入给去掉了
-
做打包处理 npm run build,发现dist里边生成了index.html模板文件,并在其中自动引入了chunk.js文件了
-
以上dist目录的文件都是打包后的文件,不要做直接的修改,有需求请去修改src里边的文件
实时打包
对src的源文件进行修改后,为了查看效果需要手动再次打包(npm run build),生产效率低下,现在webpack有一个工具,可以使得随时修改的文件随时在浏览器都可以查看到效果(不用重复打包),生产率提高(与之前 的 自媒体 的 npm run serve效果一致)
该工具名称为:webpack-dev-server(该工具会自动生成http的web服务出来)
实施步骤:
-
安装, yarn add webpack-dev-server -D
-
在webpack.config.js中中做配置
-
在package.json中配置启动指令
现在通过 npm run serve 方式就可以实时打包、浏览器实时查看效果了
注意:
实时打包运行的内容是通过“内存”提供的,本身不生成dist目录
loader-运行css文件
目标:
创建一个独立的css文件和样式,要其作用给当前的主模板文件(src/index.html)
步骤:
-
创建src/css/1.css文件,和简单样式 li{color:red}
-
在src/main.js中引入1的css样式文件
-
现在实时打包已经报错了
错误解读:1.css文件介入项目后就产生错误了,告知需要一个loader掌控局面
loader-介绍
webpack本身就是一个打包机器,其不能对具体代码内容部分进行处理(或处理得非常有限),不同的代码内容(less/scss/ES6(ES7)/image/css等等)需要webpack找到不同的loader(装载器)实现转码、编译、降级处理。
loader-安装配置css相关loader
处理css的loader有两款:style-loader 和 css-loader
安装配置使用css相关loader步骤:
-
安装loader,yarn add css-loader style-loader -D
-
在webpack.config.js中配置loader
-
现在重新启动服务 npm run serve,就发现css已经可以运行了
loader-css相关loader解读
打包好的css文件内容在哪?
答:做物理打包 npm run build,发现其在 chunk.js文件里边
在浏览器中可以看到css文件内容已经通过style标签的方式呈现在源码里边,这个style标签是chunk.js动态生成并嵌入到执行内容中去了
css-loader和style-loader的各自作用如下:
module: {
rules: [
{
// test:通过正则表达式方式匹配.css结尾的文件(样式文件)
test: /\.css$/,
// 当遇到css样式文件,就要通过如下loader处理
// 注意:两个loader有严格的先后顺序
use: ['style-loader' , 'css-loader']
// css-loader虽然在后边,但是其会先执行,使得css文件可以通过import方式引入,并把css内容编译到chunk.js中
// style-loader虽然在前边,但是其会后执行,使得css内容在chunk.js文件中被通过<style>标签方式生成出来,并嵌入到运行文件中
},
]
},
loader-引入背景图片应用
在项目中引入img图片资源做背景应用(图片通过css文件做背景效果的)
步骤:
-
给src/index.html创建两个div(one/two)
-
给项目复制两个图片(bigger.jpg small.jpg)到 src/img 目录
-
在src/css/1.css文件中 给 两个div设置宽度、高度、背景图片(分别是bigger.jpg small.jpg)
-
现在实时打包运行报错
原因:缺少loader(图片相关的loader)
loader-安装配置图片相关loader
处理img图片的loader有两个:url-loader 和 file-loader
步骤:
-
安装loader,yarn add url-loader file-loader -D
-
给webpack.config.js做配置,如下
-
现在重新实时打包(npm run serve)就是ok的,并且背景图片也在浏览器生成好了
loader-图片相关loader解读
url-loader:
负责对小于 8192字节大小的图片变为base64格式的字符串处理
limit:8192阈值大小建议是10k左右
file-loader:
图片大于 8192后 该loader会被url-loader自动调用
负责对大于 8192字节大小的图片重新编译生成在dist目录
浏览器源码可以看到大图是独立的物理文件,小图是 字符串:
注意:
图片在1.css中通过css样式设置为背景的,可以被webpack各种处理
而在模板文件中(src/index.html)通过img标签设置的图片,不会被webpack处理,其被认为是普通的html标签属性了
loader-打包好图片在哪
大图是以物理文件形成在dist目录内部
小图是以字符串形式嵌入到chunk.js中去了
如果生成的物理图片很多,它们都存在于dist目录,可以在dist里边创建子级目录存储,具体是给设置outputPath选项
use: [
{
// 注意:图片loader只配置一个url-loader即可,file-loader在条件满足后内部自动调用
loader: 'url-loader',
options: {
// limit:图片大小阈值设定
// a.图片大小大于8192,就以物理文件重新创建该图片,并形成在dist目录
// b.图片大小 小于等于8192,该图片就被编译为字符串了,嵌入的应用文档,好处是节省一个http请求资源
// 注意:不是全部的图片都适合变为字符串的,只有大小小于10k的图片才适合(图片变为字符串后,大小要变得更大)
limit: 8192,
outputPath:'image' // 创建dist/image目录存储生成的物理图片
}
}
]
loader-base64字符串图片说明
图片变为base64格式字符串了
什么是base64格式?
答:Base64就是一种基于64个可打印字符来表示二进制数据的方法。
一个图片可以变为二进制数据,该数据再编码为base64格式
loader-应用less文件
项目应用less:
步骤:
-
创建src/css/1.less文件,并设置简单的less样式
-
在main.js中引入1.less文件
-
现在实时打包报错误了(缺少对应loader)
loader-安装配置less相关loader
less需要的处理loader有:less-loader、style-loader、css-loader
步骤:
-
安装loader , yarn add less-loader less -D
-
配置loader,
-
重启服务npm run serve,less已经生效了
loader-less相关loader解读
{
// 3) less处理loader
test: /\.less$/,
use: ['style-loader' , 'css-loader', 'less-loader']
},
如上,less相关loader需要配置如上3个,顺序严格按照上述
less-loader:负责把less变为css内容
css-loader:告知可以通过import模块化方式引入该less文件,并注入到chunk.js文件中
style-loader:使得chunk.js内部的less样式内容通过<style>标签的方式嵌入到应用文档中
less内容会被打包到chunk.js文件中,该文件运行时,会通过style方式把less内容嵌入到应用文档中
(实际打包好的dist/index.html应用文档里边没有任何的style样式标签)
loader-运行es6标准代码
项目开发可以使用es6等高级内容,但是这些内容不能在所有浏览器运行,一些低版本的浏览器是运行不了的
为了使得项目兼容性更好,就要通过webpack把es6高级内容降级为es5通用的内容
步骤:
-
在main.js中应用es6高级内容
// 应用es6高标准内容(两种 let、箭头函数)
let age = 23
var getinfo = ()=>{
return 'hello'
}
-
给项目做物理打包 npm run build
-
现在打开chunk.js出口文件,发现es6的内容没有做降级处理,还是原先样子
上图,还是let和箭头函数 等es6高级内容(项目兼容性不能保证
loader-babel-loader和preset和plugin关键字解读
处理es6高级内容的loader是 babel-loader
每一个高级标准内容的处理都有独立的模块,称为plugin插件,let有对应的plugin、箭头函数有对应的plugin
如果应用许多高级内容,就需要安装许多对应的不同plugin,各个plugin逐个安装很繁琐
此时来了preset,其是对许多常用plugin的封装,提供应用速度
(如果用到了一个生僻的高级内容,preset处理不了,就再额外安装plugin解决)
loader-安装配置loader和preset做降低处理
步骤:
-
安装,yarn add babel-loader @babel/core @babel/preset-env -D
-
在webpack.config.js中配置loader
-
使得babel-loader可以找到preset
配置方式有3中:webpack.config.js、bablel.config.js、.babelrc
我们采用bablel.config.js主流方式
在根目录创建 bablel.config.js 文件,并设置如下内容:
-
现在给项目重新做物理打包(npm run build),发现es6高级内容已经降级为es5了