1. 简单了解一下webpack

本质上，webpack是一个用于现代javascript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将项目中所需要的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。

2. 依赖图
   每当一个文件依赖另一个文件时，webpack都会将文件视为直接存在依赖关系，这使得webpack可以获取非代码资源，如images或web字体等，并会把它们作为依赖提供给应用程序。
3. 什么是webpack cli？
   通过命令行的方式调用webpack，被称为webpack cli.
4. 当我们在终端执行webpack命令时发生了什么
   1. 调用执行webpack包对应的bin目录下的webpack.js文件，紧接着再调用webpack-cli包
   2. 调用执行webpack-cli包对应的bin目录下的cli.js文件，然后再继续调用webpack包。
   3. 调用执行webpack包的API进行打包，如create-react-app的react-scripts：

// create-react-app 通过调用 webpack api 来打包
function build(previousFileSizes) {
  console.log('Creating an optimized production build...');
  const compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      let messages;
      //  ...其他操作
    })
  })
}

// 其他操作：这里可以通过stats对象拿到打包后所有资源体积以及打包时间。（可用于脚手架日志构建）

5. webpack api简介
   使用webpack api: 将webpack.config.js的配置作为参数传递给webpack函数即可。
   使用示例：

const webpack = require('webpack');
const compiler = webpack({
  // webpack的诸多配置置于此处
  entry: './index.js'
});
compiler.run((err, stat) => {
  // 通过stat对象获取关于构建时间及资源等信息
})

示例： 使用webpack api打包一个最简单的js资源。

代码如下：

1. 新建一个index.js文件，写入部分内容

const sum = (a, b) => {
  return a+b;
}
const result = sum(1,2);
console.log(result);

2. 新建一个test.js文件，写入部分内容。

const minus = (a, b) => {
  return a-b;
}

const resultMinus = minus(2, 1);
console.log(minus);

3. 新建build.js文件，使用webpack api打包js资源

const path = require('path');
const webpack = require('webpack');

function wrapBuild() {
  return webpack({
    entry:{ 
      index: './index.js',
      test: './test.js'
    },
    mode: 'none',
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: '[name].js'
    }
  })
}

wrapBuild().run((err, stat) => {
  const startTime = stat.startTime;
  const endTime = stat.endTime;
  console.log('构建时间: ', endTime - startTime);
})

4. 命令行执行node ./build.js 进行打包。
5. 查看打包产物