### webpack打包工具 如何打包？
什么是webpack ？百度能百度出贼官方 贼专业的解释，可以自己查一下，我个人理解就是个打包工具，可能还有很多使用场景，每个js文件都是一个模块，当代码相互依赖时，webpack 通过闭包的形式给这么繁琐互相依赖的模块整合化一，可能说的不对，咳咳我不要误人子弟，此番解释仅用来参考 一切以webpack官网为主 哈哈哈啊哈。
目录结构：
- 第一步初始化 npm init -y
- 第二步 下载安装webpack 可以cd进入你得文件目录下 npm istall webpack,或者 yarn add webpack --dev 也可以都只是一些命令不用纠结写法 不要npm isntall webpack -g 这样装是全局安装 会导致版本差异问题。
- 第三步 npm init -y后会自动生成一个package.json 在package.json中配置一个脚本 这个脚本的命令是webpack.会去当前的node_modules下找bin对应的webpack名字让其执行，执行的就是bin/webpack.js,webpack.js需要当前目录下有一个名字叫webpack.config.js的文件和node_modules文件夹同级 根目录下，我们会通过在package.json里配置的命令来运行，npm run build,因为我们通过npm run build 执行的目录是当前文件的目录，所以会在当前目录下查找。
- 第四步 一般我们的源码文件都会放在根目录下的一个叫src的文件夹内 打包压缩过后的代码会放到 一个dist文件夹里
- 第五步 假设我们的src文件夹下 有2个文件 一个是main.js 和a.js ;main.js内引入a.js
```
//main.js
let str=require('./a.js');
console.log(str);
//a.js
let str="我真的很帅气";
module.exports=str;
```
- 第六步 我们需要给package.json 写个命令 这里的build命令就是我自己写的 你也可以写你喜欢任何命令 等等 无所谓哈 其他的是自动生成的 不用管。
```
//package.json
{
"name": "yahiko_text",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "Yahiko",
"license": "ISC",
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^3.3.7",
"vue": "^2.6.10",
"vue-router": "^3.1.2",
"webpack": "^4.41.2"
},
"devDependencies": {
"webpack-cli": "^3.3.10"
},
"description": ""
}
```
- 第七步 我们需要简单的配置一下webpack 我们打开webpack.config.js 这个webpack.config.js是我们手动创建的 再根目录下，内容如下：
```
//webpack.config.js
//webpack的导入导出 的写法 遵循commonjs的写法 不可以用es6的 import 和export的写法
let path=require('path');//node 专门处理路径的模块 以当前路径解析出一个相对路径
module.exports={
entry:"./src/main.js",//打包的入口文件 webpack会自动查找相关的依赖，进行打包
output:{
filename:"bundle.js",//打包后的名字
path:path.resolve('./dist')//必须是一个绝对路径
}
};
```
- 第八步 我们开始打包 打开cmd面板 cd到项目下 npm run build 就ok了，如果打包顺利的话 会在根目录下生成一个dist文件夹 dist文件夹内就是打包压缩过的源码了。
