怎样编写一个通用 webpack 构建配置

前沿

有兴趣能够去极客时间《玩转 webpack 课程》

为何要将构建配置抽离成 npm 包？

通用性

• 业务开发者无需关注构建配置
• 统一团队构建脚本

可维护性

• 构建配置合理的拆分
• README 文档

质量

• 冒烟测试
• 方便持续继承，让每次提交都能检查

构建配置方案

• 方案一：经过配置文件管理不一样环境的构建，webpack --config 参数控制
• 方案二：设计成一个库，相似于：hjs-webpack，webpack-blocks
• 方案三：抽成一个工具进行管理，相似咱们经常使用的 create-react-app
• 方案四：集成在一个配置文件，经过 --env 参数控制分支选择 综上几种方案，本篇文章在于构建一个通用配置，因此本篇选择综合方案一和二，若是你的团队人员规模很大，建议采用方案三

基础概念巩固

webpack 核心概念有 entry、output、loader、plugins、mode

entry - 用来指定 webpack 打包入口

- 单入口：entry 是一个字符串 
 ```
 module.exports = {
      entry: './path/to/my/entry/file.js'
 }
 ```
 - 多入口： entry 是一个对象
  ```
     module.exports = {
          entry: {
              app: './src/index.js',
              home: './src/home'
          }
     }
```
复制代码

output - 告诉 webpack 如何将编译后的文件进行输出

• 单入口

```
 module.exports = {
      entry: './path/to/my/entry/file.js',
       output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
      }
 }
```
复制代码

• 多入口

```
 module.exports = {
          entry: {
              app: './src/index.js',
              home: './src/home'
          },
          output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js' // 经过占位符确保文件名称不一致
          }
     }
```
复制代码

loaders - 是一个函数，接受源文件做为参数，返回转换结果。

webpack 自己只支持 js 和 json 两种文件类型，经过 loaders 能够去支持其余文件类型而且将他们转换成有效的模块，还能添加到依赖模图中。
经常使用loaders 后面构建会用到

名称	描述
babel-loader	转换 es六、es7等新特性写法
file-loader	进行图片文字等打包
css-loader	支持.css文件类型加载和解析
less-loader	less转换成 css
ts-loader	ts转换成js

plugins - 用于 bound.js 文件优化，资源管理和环境变量注入，做用于整个构建过程

经常使用的 plugins

名称	描述
clean-webpack-plugin	清理构建目录
html-webpack-plugin	建立html 文件去承载bound文件
friendly-errors-webpack-plugin	友好的错误提示
uglifyjs-webpack-plugin	压缩 js
zip-webpack-plugin	打包文件压缩成 zip
commons-chunk-plugin	将相同模块提成公共js

mode - 用来指定当前构建环境，默认 production

环境	描述
development	设置 process.env.NODE_ENV 为development ，开启 NamedChunkplugin 和 namedModulesPlugin 代码热更新时很适用
production	webpack 会去开启默认压缩等
none	不开启任何优化选项

项目设计

经过多个配置文件管理不一样环境的 webpack 配置

• 基础配置 webpack.base.js
• 开发环境 webpack.dev.js
• 生产环境 webpack.prod.js
• 若是你有 ssr 的需求能够 webpack.ssr.js

打包成 npm 包统一管理

• 规范： git commit 日志，eslint等
• 质量保证： 冒烟测试、单元测试、测试覆盖率

开发通用包

项目设计

设计脑图以下：

项目目录结构以下

rick-webpack
├─.eslintrc
├─.gitignore
|─.travis.yml
├─CHANGELOG.md
├─README.md
├─package.json
├─test   // 测试文件
├─lib   //放置配置代码
|  ├─webpack.base.js
|  ├─webpack.dev.js
|  └webpack.prod.js
复制代码

eslint 规范脚本

npm i eslint babel-eslint eslint-config-airbnb-base -D
复制代码

新增一个 .eslintrc文件

{
  "root": true,
  "env": {
    "node": true
  },
  "parser": "babel-eslint",
  "extends": ["airbnb-base"],
  "rules": {
    "indent": ["error", 4]
  }
}
复制代码

单元测试、冒烟测试、测试覆盖率

冒烟测试能够保证咱们的框架是否可用，可是细节部分就须要咱们用单元测试

经常使用单元测试框架

• mocha 功能丰富，简单上手
• jest

持续集成 和 travis CI

核心思想： 代码集成到主干以前，必须经过自动化测试，只要有一个用例失败，就不能集成到主干。

为什么引入持续集成？

• 快速发现错误
• 防止分支大幅度偏离主干

选择 travis CI 缘由

github目前流行 CI ，travis CI 占比很明显

怎么样接入travis CI?

接入方式很简单，只须要简单三步

• 使用 github 登陆网站 www.travis-ci.org
• www.travis-ci.org/account/rep… 开启本身的项目
• 项目根目录新增 .travis.yml

language: node_js

sudo: false

cache:
  apt: true
  directories:
    - node_modules

node_js: stable  #设置相应的版本

 install:
  - npm install -D  #安装 builder 依赖

 script:
  - npm test
复制代码

git commit规范和changelog

后续在迭代过程很重要 良好的 git commit有如下优点

• 加快 code review 流程
• 根据 git commit 的元数据生成 changelog
• 后续维护者能够知道 feature 被修改的缘由 目前推荐采用 git commit angular 规范

具体代码和课件

参考资料

• builder-webpack4
• builder-webpack3