概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
更多关于webpack的内容请访问官网

我们这里介绍webpack的两种安装方式

1. 局部安装
2. 全局安装

局部安装

1. 创建一个工程文件夹(例如 hellowebpack) , 在该目录初始化一个package.json

cd hellowebpack
npm init

//执行npm init 后需要输入一下基本信息, 只要将name输入, 其他都可以略过

执行完成后, hellowebpack目录下出现一个package.json文件

说明: 我们使用 npm install 命令进行安装(任何) 时, 都是访问了 对应目录下package.json配置文件了. 当我们执行 npm run *** 时, 都是去 package.json配置文件中读取scripts 节点下的命令了.

2. 局部安装webpack

npm install  webpack webpack-cli -D

执行完成后, hellowebpack目录下出现一个node_modules目录, 该目录下包含所有webpack的依赖库

说明: install命令安装(任何)时, -D局部安装 -G全局安装. 如果我们全局安装webpack, 我们就可以直接使用webpack 命令了.

3.package.json文件添加build运行命令

package.json 文件下 scripts 节点, 添加build命令,如下

 "scripts": {
    "build": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

说明: mode参数有两个可选值:
production (默认值) : 编译出来的文件做压缩处理, 体积更小, 用于发布
development: 编译出来的文件不做压缩处理, 保留日志, 便于调试, 用于开发

4.webpack 需要一个默认的编译入口

默认编译入口为 ./src/index.js (需要手动创建)
默认输出路径为 ./dist/main.js (不需要手动创建, 会自动创建)

手动创建编译入口后, 执行:

npm run build

执行完成后, 我们可以看到目录中多了一个 dist目录, 目录下有一个main.js. 这就是编译的结果. 我们在html中引用js时, 应该引用这个编译后的js

说明: 可以对同一个js文件 分别以 production和development模式编译一次, 看看两个输出文件, 差别是非常大的

5.配置编译入口和编译输出文件

步骤3和4介绍了默认情况下的编译情况, 我们也可以添加配置文件
在package.json 配置文件的同级目录下, 添加一个 名为webpack.config.js的配置文件,配置项如下:

const path = require('path')  //node的语法格式, 可以对路径做处理

module.exports = {
    mode:'development',
    entry:'./src/myindex.js',
    output:{
        path:path.resolve(__dirname,"dist"),  //将相对路径转成当前的绝对路径
        filename:'mymain.js'
    }
}

设置好该配置文件后, 可以直接执行 npm run build

参数说明:
mode: 编译模式
entry: 编译入口
output: 编译输出

注意: webpack.config.js名称是固定的,不能改.

全局安装

没试过