前言：
在最开始先给大家安利廖雪峰大大的 Git教程 ，毕竟使用webpack会比单纯使用vue用多很多的命令，即使你现在看不下去，那也先把大大的文章保存起来，后面再去阅读（而且还有视频，虽然我不看视频，因为看文字比看视频快很多），学完后你会对Git管理跟命令有更深入的了解，这是我前两周学习vue的时候不知道，否则我的学习路径就不是直接从vue开始了
webpack会用到nodejs，所以最好还是需要用nodejs基础，这部分我会在webpack学完后再进行学习，到时候也会输出学习梳理文章
section-1.1
以前我们开发是基于面向过程开发，业务逻辑、dom交互等等全都堆积在一个文件里，导致文件特别的巨大，排查阅读等都不方便，并最终变得不可维护
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
这是一个示例页
</div>
</body>
<script src="index.js"></script>
</html>
let root = document.getElementById("root")
let header = document.createElement("div")
header.innerHTML = "header"
root.append(header)
let content = document.createElement("div")
content.innerHTML = "content"
root.append(content)
let sidebar = document.createElement("div")
sidebar.innerHTML = "sidebar"
root.append(sidebar)
然后我们变成基于面向对象开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
这是一个示例页
</div>
</body>
<script src="./js/header.js"></script>
<script src="./js/content.js"></script>
<script src="./js/sidebar.js"></script>
<script src="./js/index.js"></script>
</html>
/* 为了方便，这里全都写在一个里面，实际对应上面html中的各个js文件 */
/* header.js */
class Header {
constructor (root) {
let header = document.createElement("div")
header.innerHTML = "header"
root.append(header)
}
}
/* content.js */
class Content {
constructor (root) {
let content = document.createElement("div")
content.innerHTML = "content"
root.append(content)
}
}
/* sidebar.js */
class Sidebar {
constructor (root) {
let sidebar = document.createElement("div")
sidebar.innerHTML = "sidebar"
root.append(sidebar)
}
}
/* index.js */
let root = document.getElementById("root")
let header = new Header(root)
let content = new Content(root)
let sidebar = new Sidebar(root)
带来的问题变成了：
- 多出很多http请求
- 很难通过代码看到对应文件之间的相互关系（路径不好查阅）
- 代码变得不容易维护，容易造成依赖颠倒或依赖顺序不正确
要解决上面多文件，相互关系，依赖顺序等问题，我们需要使用ES module模块引入的方式来解决上述的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
这是一个示例页
</div>
</body>
<script src="./index.js"></script>
</html>
// ES modudule 模块引入方式
import Header from './js/header.js'
import Content from './js/content.js'
import Sidebar from './js/sidebar.js'
let root = document.getElementById("root")
let header = new Header(root)
let content = new Content(root)
let sidebar = new Sidebar(root)
然而import浏览器并不识别，所以这时候就需要使用webpack模块打包工具
视频中直接在lesson文件夹外面跑npm init lesson，但是我试了以后会报错（文件夹已经改名成lesson），所以进入文件夹，将原来js文件夹下的代码拎出到index.html同级目录，在该文件夹下：
-
执行
npm init，创建package.json文件（这里也可以手动创建，自行百度，不过命令行会方便很多） -
执行
npm i webpack-cli --save-dev（对于--save和--save-dev的差别请参考 --save 和 --save-dev 以及 npm命令行缩写) -
视屏里说安装webpack-cli即可，然而还是不行，需要安装webpack，执行
npm i webpack --save -
执行
npx webpack index.js
对于使用ES Module语法，文件是有格式要求的，必须将对象export出来，所以header/content/sidebar文件都需要添加export default
class Header {
constructor (root) {
let header = document.createElement("div")
header.innerHTML = "header"
root.append(header)
}
}
/* 其他文件一样导出，Header自行更改 */
export default Header
这时候webpack会创建一个dist文件夹，里面的main.js就是翻译后的代码，因此index.html需要修改一下js的引用路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
这是一个示例页
</div>
</body>
<script src="./dist/main.js"></script>
</html>
安装webpack并打包好后的文件目录
section-1.2 什么是模块打包工具
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
除了ES Moudule 模块引入方式，webpack还支持CommonJS 模块引入方式， ADM引入方式， CMD引入方式，css/sass/less 文件中的 @import 语句，样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)
// CommonJS 模块引入方式
let Header = require('./header.js')
let Content = require('./content.js')
let Sidebar = require('./sidebar.js')
class Header {
constructor (root) {
let header = document.createElement("div")
header.innerHTML = "header"
root.append(header)
}
}
/* 其他文件一样导出，Header自行更改 */
module.exports = Header
section-1.3 webpack安装
按照官网来即可
查询webpack具体的历史的版本号： npm info webpack
webpack安装具体版本号 npm i webpack@4.16.5，@加版本号就是指定安装哪个版本
section-1.4 使用webpack的配置文件
直接执行npx webpack这条命令，如果没有npx自行升级到5.2.0及以上即可
npm@5.2.0 所自带的 npm 包运行器将 ./node_modules/.bin/webpack 命令缩短为 npx webpack
webpack如果没指定打包哪个文件，那么webpack就会去找默认的webpack.config.js文件，来按照规则进行打包
如果需要指定打包的规则文件，则需要使用npx webpack --config rules.js，这样，webpack就会用rules.js这个文件规定的规则来进行打包；如果不想把配置文件放在跟node_modules文件同级目录，那么指定目录也是可以的npx webpack --config anyway/webpack.js
webpack配置文件跟node_modules不在同一目录
我们使用vue的时候，并不会使用到webpack这个指令，因此我们可以使用npm scrips 简化打包代码，对应的文件是package.json中的scripts标签（参照1.2中的“安装webpack并打包好后的文件目录.jpg”）
"scripts": {
"bundle": "webpack"
}
这样写之后，此时 npm run bundle 相当于原先的 npx webpack 命令
scripts是npm脚本，scripts标签内会先去当前工程目录的node_modules去找webpack，而不会直接全局找，因此也不需要把bundle命令写成“npx webpack”
最开始安装webpack-cli，就是为了在命令行里能正确执行webpack这个指令
section-1.5 浅析webpack打包输出内容
示例图片
Chunks: 打包文件的id
Chunks Names: 打包文件的名称
实在没什么好说的…英文都表示的很清楚了，入口其实可以有很多个，后面会延展这里就点到即可
网友评论