X-BUILD

概念

如果你对 webpack 没有太多的了解，本章可以带你了解 X-BUILD 的基本工作原理，让你节省大量的时间快速享受 webpack 带来的便捷。

注意

本章节内所有内容均不需要你做配置，仅需了解即可。

入口文件

X-BUILD 在初始化项目时，预先做好了入口文件的关联，你无需关心 html/js/css 文件是如何关联在一起的：

HTML

使用 HtmlWebpackPlugin 配置了 HTML 入口模板文件（src/index.[html/pug]），当你初始化项目时选择了 Pug(Jade) 选项后，会自动安装 pug-loader 来支持 pug 或 jade 文件，在这里还是很推荐使用 pug 作为 HTML 的模板引擎。

什么是 pug 模板引擎？

CSS

初始化项目时如果选择了 CSS Pre-processors 选项，会再次询问你选择哪种 CSS 预处理器作为开发工具（单选），随后会安装相对应的 loader，推荐至少掌握一种 CSS预处理器。

PostCSS 插件 Autoprefixer 自动补全浏览器私有前缀。若使用更多的插件请自行安装，然后在跟目录下的 postcss.config.js 中配置。

安装 Sass 失败？

JavaScript

  • Babel : 它能让你编写的新版本 JavaScript 代码，在旧版浏览器中依然能够工作。

  • ESLint : 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。

  • TypeScript : TypeScript 并不是一个完全新的语言, 它是 JavaScript 的超集，为 JavaScript 的生态增加了类型机制，并最终将代码编译为纯粹的 JavaScript 代码。

快速创建的项目并不包含这两项功能，但 create 命令中还是将这两项作为默认选中状态，他们可以帮你养成书写更加先进和规范的代码。

静态资源

webpack 将动态打包所有依赖，因为现在每个模块都可以明确表述它自身的依赖，可以避免打包未使用的模块。

创建目录 *

初始化的项目中并没有静态资源目录，但这并不代表你可以任意放置你的资源文件：

在 src/ 目录下创建 assets/ 目录：

图片：创建目录 assets/images，支持 png|jpe?g|gif|svg|webp 格式。

字体：创建目录 assets/font，支持 woff|eot|ttf|otf 格式。

视频：创建目录 assets/media/，支持mp4|webm|ogg|mp3|wav|flac|aac 格式。

webpack 把一切资源都当作模块来处理，你可以通过 require('') 来引入这些文件，X-BUILD 已经帮你安装好了读取这些文件的 loader，可以放心使用。

为什么静态资源文件也可以当作模块被引入？

加载数据（后期实现）

可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理加载这三类文件：

npm install --save-dev csv-loader xml-loader

在 xbuild.config.js 中 loaders 加入以下代码：

loaders: [
  {
    test: /\.(csv|tsv)$/,
    use: [
      'csv-loader'
    ]
  },
  {
    test: /\.xml$/,
    use: [
      'xml-loader'
    ]
  }
]

开发环境

HMR

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一，它允许在运行时更新所有类型的模块，而无需完全刷新。

Source Map

此项可以将编译后的代码映射回原始源代码，当你的代码在浏览器中报错时，可以辅助你快速定位到源码的位置。

wacth

被依赖的文件发生更改时，都触发重新编译，所以你不必再去手动运行整个构建。

生产环境

模块分离

此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级。

CSS 分离

默认情况下，CSS 会被打包在 JavaScript 文件中，X-BUILD 使用 ExtractTextWebpackPlugin 从 bundle 中提取文本（CSS）到单独的文件。

清理 /dist 文件夹

当执行 npm run build 后，X-BUILD 将编译好的文件输出在跟目录下的 dist 目录中，当再次编译或使用开发环境时会清理掉 dist 目录。

环境变量

NODE_ENV 是一个由 Node.js 暴露给执行脚本的系统环境变量，通过 process.env.NODE_ENV 可以区分开发与生产环境：

生产环境：[ production ]

开发环境：[ development ]

// example
if (process.env.NODE_ENV !== 'production') {
  console.log('Looks like we are in development mode!');
}

自适应解决方案

X-BUILD 采用 px2rem-loader + hotcss 的自适应解决方案，在初始化时选择 Mobile layout 即可开启此项功能。

用法

首先要和设计师沟通，确定设计稿的宽度，例如 750px，当然这并不是最优设定，你可以在 xbuild.config.js 中设置 designWidth，类型为 Number。

随后在代码中设计图内的元素尺寸是多少像素，在 css 中写同样的尺寸即可，在浏览器中可以查看已经将 px 转化为 rem，更换设备后发现显示效果完全一致。

REM 自适应解决方案

请求接口

当有大量的接口时，使用 X-BUILD 提供的自动加载 api 模块将节省大量操作：

API 目录

src/api/index.js 为 api 主入口文件，使用 webpack 提供的 require.context 方法，将 api/ 内的所有文件（包括子路径）自动加载，并通过 ES6 导出一个对象。

使用方式

假设创建一个 GET 请求，在 api/ 目录下创建 getUser.js，在此我们使用 axios 举例：

// getUser.js
import axios from 'axios';

export default function () {
  return axios.get('...')
}

此时导出的文件会被 index.js 获取到，并且会以文件名作为对象内的 key 导出。

使用接口

假设在 src/srcipts/index.js 中使用接口：

import Api from '../api'
Api.getUser()

← 配置 →