1. webpack介绍
06_webpack的基础打包_01.jpg
06_webpack的基础打包_02.jpg
06_webpack的基础打包_03.jpg
commonjs和esmodule不是随随便便就可以用的
esmodule在一些特殊的浏览器中才能用
commonjs在node的环境下面才能使用
这两个东西在很多情况下是不能使用的，开发里面，很多时候，将js作为一个模块直接使用
这个时候我们就需要将当前环境支持模块化，不支持的话，编写对应的模块化代码，就会报错
export啥的，import啥的话，就不认识这些关键字，就会报错
webpack的话，支持各种模块化，webpack环境下，可以编写esmodule，commonjs，都是可以编写的。
06_webpack的基础打包_04.jpg
2. Vue项目加载的文件
06_webpack的基础打包_05.jpg
3. Webpack的使用前提
06_webpack的基础打包_06.jpg
4. Webpack的安装
06_webpack的基础打包_07.jpg
npm install -d 就是npm install --save-dev
npm insatll -s 就是npm install --save
以前一直在纠结一个npm安装的包依赖管理的问题。是这样的：
我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，他们是：
--save-dev
或
--save
首先需要说明的是Dependencies一词的中文意思是依赖和附属的意思，而dev则是
develop（开发）的简写。
所以它们的区别在 package.json 文件里面体现出来的就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 域里面去，而使用 --save 安装的插件，则是被写入到 dependencies 区块里面去。
那 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢？
devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。
比如我们写一个项目要依赖于jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies ；
而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包，上线以
后就和他们没关系了，所以将它写入devDependencies。
5. Webpack的默认打包
06_webpack的基础打包_08.jpg
index.html
src folder--> index.js + js folder(format.js math.js)
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./src/index.js" type = "module"></script>
</body>
</html>
src/index.js
import { sum } from "./js/math";
const { priceFormat } = require("./js/format");
console.log(sum(20, 30));
console.log(priceFormat());
src/js/format.js
const priceFormat = function() {
return "¥99.88";
}
// CommonJS的导出
module.exports = {
priceFormat
}
src/js/math.js
// ES Module
export function sum(num1, num2) {
return num1 + num2;
}
直接运行的话会报错
index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
<script src="./src/index.js" type = "module"></script>必须跑到服务上，可以使用live-server
想跑到浏览器上问题很多。
浏览器不认识代码，我们必须进行打包。
在文件夹下面的cmd输入webpack，就会出现一个dist文件夹，里面有一个main.js
打包后的main.js是可以被浏览器直接识别的，本地直接打开也可以。
以前commonJS只能在node上运行，
ESModule只能在本地服务上面打开，因为不支持file协议，但是打包后就可以直接打开。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
内容就会正确打印
distribution 发布
6. 创建局部的webpack
每次打包都是用全局的话，就会有不好的影响。因为每个项目依赖的webpack版本不一样。真实的开发环境里面，很少用全局的webpack去打包某个项目，一般会针对单独项目，安装webpack版本
npm init -y 表示直接创建package文件，全部yes
npm i webpack webpack-cli -D
会生成package-lock.json文件，这个文件记录了真正安装的版本号，并且下次安装的话，会去缓存里面找这个文件
（这个文件的作用在老师的公共号里面有讲）
06_webpack的基础打包_09.jpg
安装完局部webpack和webpack-cli之后，怎么进行打包，如果依旧使用在文件夹下面的cmd，webpack，这个时候使用的依旧是全局的webpack。
这个时候局部的webpack在nodemodlues的bin的webpack里面,在cmd输入下面命令，使用的就是本地webpack
./node_modules/.bin/webpack
这个样子比较麻烦，npm工具给我们提供了npx这个工具
输入npx webpack
就会优先在/node_modules/.bin文件夹下面找webpack
我们一般也不这么做，在package.json里面有个script
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
默认是test脚本，不用，直接删除掉
"scripts": {
"build": "webpack" //执行build脚本，
},
直接执行npm run build的话，就会执行build的脚本，就会自动执行webpack命令，并且在脚本里面执行的时候，是不用写npx的，（npx webpack），因为脚本执行的时候，会自动去node_modules下面的.bin下面来找这个命令。
所以，以后想打包，直接执行npm run build就可以了
7. webpack配置文件
刚才我们并没有指定打包的入口，就直接对src文件夹下面的index.js进行了打包
这是因为当执行npm run webpack的进行打包的时候，它会默认去我们当前所在目录下面的src下面，去找index.js文件，之后对这个文件进行打包，假如把index.js重命名为main.js，在npm run webpack，就会报错。
我们也可以指定出口和入口，
npx webpack --entry ./src/main.js --output-path ./build
我们也可以改变build脚本
"scripts": {
"build": "webpack webpack --entry ./src/main.js"
},
但是webpack的配置很多，全部写道webpack的后面不太显示，也不太好维护管理
所以我们在真是的开发里面，在当前的文件夹下面，创建一个webpack.config.js文件，这个文件的名字是固定的。
webpack是在node环境下运行的，读取配置文件也是在node下面，所以必须使用module.exports = { },如果想使用es module导出的话，需要做一些额外的配置，所以webpack的配置信息一般使用commonjs。
output的path必须写绝对路径，所以会对路径进行拼接
const path = require("path");
module.exports = {
entry: "./src/main.js",
output:{
path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
filename: "bundle.js"
}
}
然后输入npm run build就会进行打包
06_webpack的基础打包_10.jpg
8. 指定配置文件
06_webpack的基础打包_11.jpg
如果不想使用webpack.config.js这个名字，需要做一下配置,把package.json里面的build脚本后添加命令
"scripts": {
"build": "webpack --config why.config.js"
},
再把webpack.config.js的名字换成why.config.js，
然后运行npm run build,就可以打包了
9.webpack的依赖
06_webpack的基础打包_12.jpg
在src/js文件夹里面添加element.js文件
element.js
const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊，李银河";
document.body.appendChild(divEl);
执行npm run build之后，当前的页面上什么都没有显示，可以说element.js没有被打包
它会从我们的入口开始，看我们入口开始依赖了那些东西。
我们的入口时.src/main.js，这里面我们依赖了math.js format.js，有依赖就意味着，这两个文件会打包，从入口开始会查找所有依赖，math.js也可以依赖别的东西，也可以有ts文件，css文件，它们之间又有依赖。不管有那些依赖，依赖的入口就是我们配置的入口，从入口开始查找所有依赖，找到之后就形成了依赖关系图，是一个图结构，是一种数据结构。
最终会形成一个以来图，webpack在打包的时候，会把依赖图里面的所有东西进行打包，最终形成静态资源，如果没在依赖图里面，是不会进行打包的。当开始从入口开始找，又从里面的其他文件找别的文件依赖。
我们现在希望element.js被打包，就直接在main.js里面
import "./js/element.js"
main.js就变成了下面的样子
import { sum } from "./js/math";
const { priceFormat } = require("./js/format");
import "./js/element.js"
console.log(sum(20, 30));
console.log(priceFormat());
然后运行npm run build,你好啊，李银河就出现在了页面上
06_webpack的基础打包_13.jpg
网友评论