### 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文件夹内就是打包压缩过的源码了。