Webpack

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

---

# 1.webpack 定义

webpack: 一个用于现代 JavaScript 应用程序的静态模块打包工具

# 2.webpack 与 webpack-cli 关系

webpack -> node_modules/.bin 下 webpack -> 依赖 webpack-cli 的 runCli 函数 -> 依赖 webpack 打包
注意：CLI:command line interface (命令行接口)
注意：可以越过 webpack-cli, 使用以下语句即可手动调用 webpack，一些框架中就是这样使用进行调用，比如 React、Vue 等

const webpack =  require(webpack);
const com = webpack(config);

# 3.webpack 安装

npm install webpack webpack-cli -g 全局安装 
npm install webpack webpack-cli -D 局部安装

注意: -D 是 --dev-save 缩写

# 4. 打包编译

webapck 执行流程：执行 webpack 命令后，会寻找当前目录下 src/index.js 文件作为入口
使用 npm init 命令生成 package.json 配置文件，若添加 - y 则无需进行手动设置，自动生成 package.json 文件

# 5. 使用局部 (本地) webpack 打包方法 (3 种)

1. 使用 ./node_modules/.bin/webpack 命令
2. 使用 npx webpack 命令，(npx: 直接执行 node_modules 文件中的命令 (文件))
3. package.json 文件里面配置以下语句，使用 npm run build 即可

   "scripts": {
     "build": "webpack"
   }

注意：如果局部没有安装 webpack，那么在执行的时候就寻找全局的 webpack

# 6. 指定入口文件

1. 使用 npx webapck --entry ./src/main.js --output-path ./build 指定入口文件为 src 文件夹里 main.js 文件，打包生成文件夹 build (较为复杂)
2. 指定入口和出口的两种方式
   1. 在 package.json 文件里配置

      "scripts": {
        "build": "webpack --entry ./src/main.js --output-path ./build"
      }

3. 新建 webpack.config.js 文件，添加相关配置

   <!-- 导入node里内置的path模块 -->
   const path = require('path');
   module.exports = {
     entry:"./src/main.js",
     output: {
       filename:"bundle.js",
       <!-- path只能填写绝对路径 -->
       <!-- `path.resolve(__dirname,"")`可以获取当前文件的绝对路径，与第二个参数进行拼接获取完整的绝对路径 -->
       path:path.resolve(__dirname,"./build")
     }
   }

# 7. 手动指定 webpack 配置文件

当执行 npm run build 命令后就会执行 package.json 文件中 "script":{"build":"webpack"} , 然后会查看当前文件夹下面有没有 webpack.config.js 文件，如果有就会依赖该文件进行编译执行；如果没有的话就会寻找 src/index.js 文件
手动指定 webpack 配置文件代码如下

"scripts": {
  "build": "webpack --config ./webpack.config.js"
}