奶爸级教学---webpack详细教学
作者是名退役复学在校大学生，对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究，欢迎关注，和我一起交流。
今天手把手教学webpack，奶爸级教学，一键三连收藏起来吧。
目录
一、webpack
二、前端模块化
1、传统的开发模式
2、使用ES6模块化
3、使用CommonJS规范
三、webpack配置文件
四、项目管理文件
五、webpack的loader
1、处理CSS
2、处理图片
3、ES6转ES5
4、打包Vue
六、plugin
1、添加版权的plugin
2、打包html的plugin
3、压缩js的plugin
七、搭建本地服务
一、webpack
webpack 中文文档 | webpack 中文网
概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
二、前端模块化
1、传统的开发模式
场景：有一个复杂的页面，需要小明和小红分别开发其中的部分模块。小明和小红分别写了各自的js文件，最后合并引入，小明的js文件为a.js和c.js；小红的文件为b.js。
存在的问题：小明的a.js中的age >= 18 为true，c.js中的 age>=18为false，小明百思不得其解？？？
原因：变量命名冲突/js加载顺序问题（如果先加载c.js再加载b.js也可以解决问题）
解决方案：匿名函数，声明函数立马调用函数，函数具有作用域变量就隔离了，使用return返回需要给别人访问的成员
(function() {})()
(function(){}())
// a.js
const moduleA = (function() {var name = '张三'var age = 20
if(age >= 18) {console.log('成年人');}
return {name,age}
})()
// b.js
const moduleB = (function() {var age = 10
return {age}
})()
// c.js
console.log(moduleA.age);
if(moduleA.age >= 18) {console.log('成年人');
}
2、使用ES6模块化
给script标签添加type属性等于module
<script src="./js/a.js" type="module"></script> <script src="./js/b.js" type="module"></script> <script src="./js/c.js" type="module"></script>
会报错
原因：只支持协议http, data, chrome, chrome-extension, https，这边直接使用file文件打开，属于file协议
解决：
第一种：
1、安装【anywhere】插件，搭建一个服务器。使用命令【npm i anywhere -g】，需要node环境支持。
2、打开终端，切换到当前项目目录下
3、使用命令【anywhere】启动
4、根据终端输出的地址去访问html，后面跟上html所在的路径
第二种：
商店搜索【Live Server】安装，安装完之后，再html文件里面右键，选择【Open With live server】
仍然报错
原因：使用ES6模块化操作，使用type="module"引入js文件，js文件就是一个单独的模块，外部无法访问
解决：每个js模块需要导出给外部访问的成员
export和import
export导出
import导入
也可以分别导出
导入起别名，使用as
导入所有，使用*号，必须起别名方便后续调用
导出默认,对于*不管你有没有defalut
3、使用CommonJS规范
CommonJS规范 - 简书
报错，js没有module和require这两个关键字，这是commonJS设计的关键字，无法被js识别
使用webpack
常见main.js作用程序入口，引入html需要的js
下载webpack，打开终端，使用命令【npm i webpack@3 webpack-cli -g】
使用终端进入项目【cd 项目路径】
使用打包命令【webpack 要打包的文件 打包生成的位置】，【webpack main.js ./dist/bundle.js】
修改html引入的js地址为打包生成的js文件
三、webpack配置文件
每次都要输入打包的文件和生成后的地址，比较麻烦，可以使用webpack的配置文件
新建文件【webpack.config.js】
配置文件
require('path'),node自带的一个模块,用来处理路径
entry:入口函数,要处理文件
output:出口,输出文件的位置
resolve()拼接路径
__dirname:node环境全局变量,当前文件的绝对路径
使用终端进入项目根目录，输入命令【webpack】，webpack会自动查找目录下的webpack.config.js文件，读取里面的配置进行打包
######
四、项目管理文件
前面的命令默认去全局配置的找运行依赖，但是一个项目应该有属于自己项目的依赖，而且项目使用了哪些依赖应该记录下来
使用命令初始化【npm init】package.json文件
dependencies：生产环境下，项目运行所需依赖。
devDependencies：开发环境下，项目所需依赖。
scripts：执行 npm 脚本命令简写，比如"start": "xxx xx", 执行 npm start 就是运行 "xxx xx"。
五、webpack的loader
我们使用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖
在实际项目中不仅仅有js文件，还有css、图片，ES6转化ES5，TypeScript转化ES5代码，将less，scss转化css，将jsx，vue文件转化js文件等
对于webpack本身来说是不具备这些转化功能的，这时候必须使用对应的loader进行处理
大部分的loader都可以在webpack的官网中找到，并且学习相应的用法
如何使用？？？
通过npm安装需要使用的loader
在webpack.config.js的modules关键字下进行配置
1、处理CSS
css-loader | webpack 中文网
安装对应的loader，使用命令【npm install --save-dev css-loader@3】
在webpack.config.js配置【module】
在main.js中引入css文件，进行打包，这时候会报错，css-loader需要style-loader支持
安装style-loader,使用命令【npm install --save-dev style-loader】
重新打包成功
2、处理图片
使用css设置背景图片，直接打包，会报错，打包文件需要loader来处理
安装【npm install --save-dev file-loader@5】
在webpack.config.js配置【module】
打包成功，但是打开html发现没有背景图片，通过开发者工具发现是背景地址有误
配置file-loader的options中的publicPath
3、ES6转ES5
检查打包后的文件有es6代码，有的浏览器还不支持es6，所以有时候我们需要将es6的代码转化成es5
安装loader，【npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env】
在webpack.config.js配置【module】
如果你不行的话试一下这个版本号
打包，已经没有ES6代码了
4、打包Vue
下载vue，【npm i vue】
使用Vue
打包，打开html，没有效果控制台报错，需要指定使用Vue的版本。这边Vue的写法是compiler（模板写法），默认使用的是runtime（运行时）模式，需要修改默认模式
webpack.config.js配置resolve，重新打包，Vue代码生效
el与template
我们如果要修改页面内容，必须修改html文件，使用组件也是直接写在html里面，现在准备把内容分离出来
el属性,用于与#app进行绑定，让Vue实例可以管理其他内容
template属性，Vue会把#app替换成template里面的内容
我们可以把#app的内容删除，写到template属性
现在的内容都写在Vue实例里面，现在剥离出来，通过注册组件的方式实现
把变量App分离到单独的文件
使用.vue文件
打包会报错，没有loader处理.vue这种文件类型，安装vue-loader【npm i vue-loader@14】【npm i vue-template-compiler】
配置modle
{test: /\.vue$/,use: ['vue-loader'],},打包成功
现在要开发一个组件就很容易了，进行了模块化，一个组件就是一个单独的文件
六、plugin
plugin是什么？
plugin是插件的意思，用于对现有框架进行的扩展
webpack中的插件就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等
loader与plugin的区别
loader主要用于转换某些类型的模块，是一个转换器
plugin是插件，是对webpack本身的扩展，是一个扩展器
plugin 的使用过程
通过npm安装需要的plugins（webpack内置已经有的就不需要）
在webpack.config.js中的plugins中配置插件
1、添加版权的plugin
2、打包html的plugin
打包后的dist文件夹没有html文件，不完整
安装【npm i html-webpack-plugin@3】
现在dist已经有html文件了，但是我们要在添加#app的div上去，默认只是一个基本的html文件
加上配置
这时候打包出来的html是我们设计好的html文件，自动加上了js的引用
3、压缩js的plugin
打包出来js文件比较大，需要压缩
安装【npm i uglifyjs-webpack-plugin@1】
配置
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
new uglifyjsWebpackPlugin(),
七、搭建本地服务
现在预览效果需要每次打包，比较麻烦
webpack提供了一个可选的本地开发服务器，可以实现浏览器自动刷新显示修改后的结果
安装【npm install webpack-dev-server】
终端输入【webpack-dev-server】,报错默认去全局找，所以需要局部配置
终端输入【npm init】生成项目管理文件package.json
配置script
使用命令【npm run dev】启动
修改配置
自动打开浏览器
奶爸级教学---webpack详细教学相关推荐
- VINS在安卓手机上实现、安卓相机标定、IMU标定 亲爸级原理介绍和教学
需求和想法: 在安卓手机上实现SLAM中的定位与轨迹,或者 VINS在Android上的实现. **现有需求:**针对SLAM的算法:VINS-MONO(港科大的一套基于单目相机的SLAM项目),移植 ...
- Javascript-小游戏2048 超详细教学说明
Javascript-小游戏2048 超详细教学说明 前言 最近在学前端,趁热找几个小游戏练练手. 2048游戏规则不再过多描述,这里主要用到了html,css,JavaScript相关知识. 代码来 ...
- “是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作 博主的话 游戏展示 编程工具介绍 游戏代码 代码讲解 js 第一步 切换div的显示与隐藏 js 第二步 在菜单页面用 ...
- 如何截获打印机文件_打印、复印还不会，如何在办公室里混？全程详细教学
我们在职场中,经常需要用到打印机,相信很多人都还不会打印.复印文件,求人不如求己,今天就来详细教学,一起来学习吧. 如何使用打印机? 首先用一根电源线和一根USB线,将电脑主机与打印机连接,然后按一下 ...
- android手游自动按键,天涯明月刀手游自动弹奏按键精灵使用详细教学 安卓ios使用教程...
天涯明月刀手游自动弹奏案件精灵代码怎么编写和使用?天涯明月刀手游ios怎么自动弹奏?一起来看看吧. 天涯明月刀手游自动弹奏按键精灵使用详细教学 一.前言 由于游戏内触屏不精准,音符时长难以控制,多音/ ...
- 华为擎云G540笔记本怎么U盘重装电脑系统详细教学
华为擎云G540笔记本怎么U盘重装电脑系统详细教学分享.有用户在使用华为擎云G540笔记本电脑的时候,想要将电脑系统进行更换,但是自己没有重装过电脑系统,不懂要如何去进行操作.针对这个问题,接下来我们 ...
- 最终幻想-核心危机中魔石融合附全能力详细教学
FF7CC中文版魔石融合附全能力详细教学,专为入门玩家打造,适合初学者的入门合成技巧探讨,目的是在早期用最小的代价快速合成最有用的石头. 1周目初期能力有限,HP刚过2000,力和体力也就50点左右, ...
- 炫龙毁灭者KP2笔记本U盘重装系统方法图文详细教学
炫龙毁灭者KP2笔记本U盘重装系统方法图文详细教学分享.炫龙毁灭者KP2笔记本是比较不错的一款游戏本.有的用户因为使用电脑的时候安装了未知安全性的文件导致系统被损坏,需要重装系统.今天我们就一起来分享 ...
- 【ESP8266】烧录无线中继固件详细教学
[ESP8266]烧录无线中继固件详细教学 1.引言 哈喽,大家好.我是楠瘦.ESP8266是一款性价比很高的芯片,由带有WiFi功能.今天给大家带来了ESP8266中继WiFi的教程,实现无线桥接, ...
- ZYNQ7000 Vivado详细教学步骤
ZYNQ7000 Vivado开发 ZYNQ7000 Vivado详细教学步骤 ZYNQ7000 Vivado开发 1.建立工程项目 2.创建Block Design 3.配置IO BANK 4.配置 ...
最新文章
- 迁移博客到香港虚拟空间
- bmp调色板颜色信息重复_PASCAL VOC数据集-分割标签索引颜色对照及程序
- Leetcode1704判断字符串的两半是否相似(C++题解)
- 【ETL】ETL讲解（很详细！！！）
- VHD工具-VHDTOOL
- require(),include(),require_once()和include_once()区别
- 50种奇妙装置玩法，将STEM教育一网打尽
- Ubuntu进入pycharm创建的虚拟环境的方法（以及如果你安装了anaconda等其它修改了环境变量的东西该怎么进）
- list所有元素相加 python_什么是序列，Python序列详解（包括序列类型和常用操作）...
- 2022爱分析･汽车行业数字化实践报告
- Codeforces--884A--Book Reading
- Perseus(擎天)：统一深度学习分布式通信框架
- 不愿意和别人打交道_一个人不愿意和同事打交道，大多是这3个原因，你了解吗...
- 西瓜播放器xgplayer设置自动播放
- 【SQL】获取第二高薪水
- AIOT人工智能物联网+项目实战
- 机械臂末端执行器汇总
- java玩gbc,GB也有相当严谨的格斗游戏。GBC少年街霸2.让我稍微惊喜了一下。
- throughput(吞吐量)
- 前端要学多久才能去工作？具备什么技能？