一、模块化

CommonJS、AMD 和 ES6 Module 规范（另外还有 CMD、UMD 等），下面我们来简单看一下：

1、CommonJS

nodejs 广泛应用得一种模块化规范, 是一种 同步加载 模块依赖的方式；

• require：引入一个模块
• exports：导出模块内容
• module：模块本身

2、AMD

JS 模块加载库 RequireJS 提出并且完善的一套模块化规范，AMD 是一条 异步加载 模块依赖的方式；

• id：模块的 id
• dependencies：模块依赖
• factory：模块的工厂函数，即模块的初始化操作函数
• require：引入模块

3、ES6 Module

ES6 推出的一套模块化规范。

• import：引入模块依赖
• export：模块导出

Tips：除了上面三大主流规范，还有

• CMD（国产库 SeaJS 提出来的一套模块规范）
• UMD（兼容 CommonJS 和 AMD 一套规范）。

目前多数模块的封装，既可以在 Node.js 环境又可以在 Web 环境运行，所以一般会采用 UMD 的规范，后面 Webpack 针对 lib 库的封装会有进一步介绍。

二、webpack 解决什么问题

1、Grunt、Gulp 缺陷

• 打包的思路是：遍历源文件 → 匹配规则 → 打包
• 缺陷：做不到按需加载，到底页面用不用，打包过程中是不关心的

2、webpack 得好处

• 不同之处：从 入口文件 开始，经过模块 依赖加载 、 分析 和打包 三个流程完成构建。
• 优势：达到按需加载的目的，比如code split（拆分公共代码等）。

3、webpack 解决的问题

• 模块化打包，一切皆模块，JS 是模块，CSS 等也是模块；
• 语法糖转换：比如 ES6 转 ES5、TypeScript；
• 预处理器编译：比如 Less、Sass 等；
• 项目优化：比如压缩、CDN；
• 解决方案封装：通过强大的 Loader 和插件机制，可以完成解决方案的封装，比如 PWA；
• 流程对接：比如测试流程、语法检测等。

安装

npm install -g webpack webpack-cli

快速开始

最新的 webpack 支持零配置使用，默认入口为当前目录下的 src 中的 index.js 文件，默认打包输出的目录为 dist 目录，默认打包模式 mode 为 development

1. 先建一个文件夹，如 webpack-test
2. webpack-test 文件下新建一个 src 目录，再 src 下新建一个 index.js 文件
3. 终端进入 webpack-test 目录，运行 webpack
4. webpack 会在 webpack-test 目录下生成一个 dist 目录。

配置项说明

在 webpack-test 目录下新建一个 webpack.config.js，返回的是一个配置对象。

entry 配置入口文件

在 src 目录下新建 a.js，b.js

// 单一入口
module.exports = {entry:'./src/a.js'}

// 多入口
module.exports = {
  entry:{
    a:'./src/a.js',
    b:'./src/b.js'
  }
}

在多入口时，会在 dist 目录下打包 a.js 和 b.js

output

• filename 打包之后的文件夹名

// 单入口情景
module.exports = {
  entry:'./src/a.js',
  output:{filename:'[name].[hash:7].js'
  }
}

// 打包后类似 main.abdfa13.js

// 多入口情景
module.exports = {
  entry:{
    a:'./src/a.js',
    b:'./src/b.js'
  },
  output:{filename:'[name].[hash:7].js'
  }
}

// 打包后生成类似 a.abdfa13.js , b.abdfa13.js

在配置文件中，有几个可用的参数，如 hash 当前打包随机字符串，name 对应 entry 中的属性名（但单入口默认为 main），ext 对应 loader 中的文件后缀名。

• path 打包生成的目标文件夹，必须为一个绝对地址

const path = require('path');

module.exports = {
    entry:'./src/a.js',
  output:{filename:'[name].[hash:7].js',
    path:path.resolve(__dirname,'./dist')
  }
}

• publicPath，针对打包后的项目不在服务器的根目录访问，需要加上路径的情况。保证资源访问地址正确。主要体现在页面中引用绝对地址的图片，和 webpackPlugin 注入资源地址的时候。

比如最后项目访问路径为：https://haokur.com/webpack-test/index.html，则需要配置

const path = require('path');

module.exports = {
    entry:'./src/a.js',
  output:{filename:'[name][hash:7].js',
    path:path.resolve(__dirname,'./dist/webpack-test'),
    publicPath:'/webpack-test/'
  }
}

发布时，则可以将 dist 下面的 webpack-test 目录部署到服务器的根目录下面。

未完待续