今天目标：
-
能够安装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中做如下配置：
// 引入pathvar 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了
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
