### webpack打包工具 如何打包？
什么是webpack ？百度能百度出賊官方 賊專業(yè)的解釋，可以自己查一下，我個人理解就是個打包工具，可能還有很多使用場景，每個js文件都是一個模塊，當(dāng)代碼相互依賴時，webpack 通過閉包的形式給這么繁瑣互相依賴的模塊整合化一，可能說的不對，咳咳我不要誤人子弟，此番解釋僅用來參考 一切以webpack官網(wǎng)為主 哈哈哈啊哈。
目錄結(jié)構(gòu)：
- 第一步初始化 npm init -y
- 第二步 下載安裝webpack 可以cd進(jìn)入你得文件目錄下 npm istall webpack,或者 yarn add webpack --dev 也可以都只是一些命令不用糾結(jié)寫法 不要npm isntall webpack -g 這樣裝是全局安裝 會導(dǎo)致版本差異問題。
- 第三步 npm init -y后會自動生成一個package.json 在package.json中配置一個腳本 這個腳本的命令是webpack.會去當(dāng)前的node_modules下找bin對應(yīng)的webpack名字讓其執(zhí)行，執(zhí)行的就是bin/webpack.js,webpack.js需要當(dāng)前目錄下有一個名字叫webpack.config.js的文件和node_modules文件夾同級 根目錄下，我們會通過在package.json里配置的命令來運(yùn)行，npm run build,因為我們通過npm run build 執(zhí)行的目錄是當(dāng)前文件的目錄，所以會在當(dāng)前目錄下查找。
- 第四步 一般我們的源碼文件都會放在根目錄下的一個叫src的文件夾內(nèi) 打包壓縮過后的代碼會放到 一個dist文件夾里
- 第五步 假設(shè)我們的src文件夾下 有2個文件 一個是main.js 和a.js ;main.js內(nèi)引入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是我們手動創(chuàng)建的 再根目錄下，內(nèi)容如下：
```
//webpack.config.js
//webpack的導(dǎo)入導(dǎo)出 的寫法 遵循commonjs的寫法 不可以用es6的 import 和export的寫法
let path=require('path');//node 專門處理路徑的模塊 以當(dāng)前路徑解析出一個相對路徑
module.exports={
entry:"./src/main.js",//打包的入口文件 webpack會自動查找相關(guān)的依賴，進(jìn)行打包
output:{
filename:"bundle.js",//打包后的名字
path:path.resolve('./dist')//必須是一個絕對路徑
}
};
```
- 第八步 我們開始打包 打開cmd面板 cd到項目下 npm run build 就ok了，如果打包順利的話 會在根目錄下生成一個dist文件夾 dist文件夾內(nèi)就是打包壓縮過的源碼了。
