文档

webpack的官方文档地址：https://webpack.js.org
webpack的中文文档地址：https://webpack.docschina.org

安装

打开命令行界面，输入以下命令来安装

1	npm install webpack -g

建议也安装webpack-cli

1	npm install webpack-cli -g

安装完成之后我们就可以使用webpack命令来进行一系列的操作了，例如输入webpack -h可以查看每个命令的帮助，输入webpack -v可以查看版本号

webpack可以使用cli命令行来进行打包，也可以使用配置文件的方式来打包

1	webpack <entry> [<entry>] -o <output>

默认配置文件名为webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
      app: "./app.js"
  },
  output: {
    filename: 'bundle.js'
  }
};

首先新建我们的入口文件app.js，然后新建一个模块文件sum.js

接下来在sum.js中写入如下内容

function sum(a, b) {
    return a + b;
}
// 使用 export 暴露出模块内部的接口
export { sum };

然后再在app.js中引入该模块

1
2
3

// 使用 import ... from 引入模块
import { sum } from "./sum.js";
console.log("sum(1, 2) =", sum(1, 2));

这时候虽然代码已经写好了，但是并不能直接被浏览器解析运行，需要通过webpack打包成能别浏览器解析运行的代码，为了让webpack打包我们的代码，我们需要新建一个webpack.config.js配置文件，写入如下内容

module.exports = {
  mode: 'development',
  entry: {
      app: "./app.js"
  },
  output: {
    filename: __dirname + '/[name].bundle.js'
  }
};

然后打开命令行界面输入webpack命令即可打包成功，成功后会输出一个名为app.bundle.js的文件

为了看到输出结果，我们需要再新建一个index.html，并引入app.bundle.js，
用浏览器打开index.html，然后打开控制台，如果看到输出了sum(1, 2) = 3就代表成功了

在上面那个简单示例中，使用的是es module模块化规范，除此之外还有很多，例如CommonJS、CMD、AMD等，这里就不一一介绍了，只介绍几个流行的

其实CMD与AMD规范并没什么本质的区别，区别在于他们对依赖模块的执行时机处理不同。虽然两者都是异步加载模块，但是AMD依赖前置，一次性将所有的依赖都加载完了再使用；而CMD是就近依赖，需要使用这个依赖模块时，再加载进来使用，也就是尽可能懒加载。