webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

  1. Entry | 代码的入口,打包的入口。
  2. Output| 打包文件的(bundle)所在的目录
  3. Loader|  可以处理非js文件
  4. Plugins|  可以参与打包的整个过程，打包优化压缩
  5. mode  |  development/production模式

1、生产package.json的文件

cnpm init -y

2、安装webpack依赖

cnpm i webpack -S
cnpm i webpack-cli -S

3.在webpack.config文件中导入

const webpack = require("webpack");
const path = require("path");
const config =  {
    entry:path.resolve(__dirname,'src/main.js'),  //入口文件
    output:{  //出口文件
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'development'  //模式
}
module.exports = config;

4、配置package.json文件

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

5、打包

npm run build

打包成功
image.png