基于 webpack 的多页应用框架优化

# mobile-intl 框架起源

>基于多页框架项目 [vue-multiple-pages](https://github.com/Plortinus/vue-multiple-pages) 优化

# 基础 webpack 配置

## 配置文件

1. 通常情况，根目录下面的 `webpack.config.js` 文件作为默认配置文件


2. 自定义配置文件，使用 `--config` 指定配置文件

package.json

```js
"scripts": {
  "build": "webpack --config prod.config.js"
}
```

常用配置项：

```js
const path = require("path");

module.exports = {
  // 选择模式，webpack 可以根据选择启用内置优化
  mode: "production", // "production" | "development" | "none"

  // webpack 打包入口，单页应用配字符串，多页应用配对象或数组
  entry: "./app/entry", // string | object | array
  entry: {
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },

  // 打包文件输出配置
  output: {
    // 所有文件的输出目录，必须是个绝对路径
    path: path.resolve(__dirname, "dist"), // string
    filename: "bundle.js", // string
    filename: "[name].js", // 多入口
    // 分块(chunks)入口的名字
    publicPath: "/mobile-intl/" // string
    // 输出路径相对于 HTML 页面的 url
  },

  // 处理各种模块的 Loader
  module: {
    rules: [{
        test: /\.jsx?$/,
        include: [path.resolve(__dirname, "app")],
        exclude: [path.resolve(__dirname, "app/demo-files")],
        loader: "babel-loader", // Rule.use: [ { loader } ] 的简写，loader 名称
        options: {
          // Rule.use: [ { options } ] 的简写，loader 配置
          presets: ["es2015"]
        }
      },
      {
        test: /\.html$/,
        use: [
          // 配置多个 loader
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      }
    ]
  },

  // 模块解析配置
  resolve: {
    // 模块搜索目录
    modules: ["node_modules", path.resolve(__dirname, "app")],
    // 文件扩展名
    extensions: [".js", ".json", ".jsx", ".css"],
    // 别名
    alias: {
      vue: "vue/dist/vue.js",
      vuex: "vuex/dist/vuex.js",
      "@": path.resolve("src")
    }
  },

  // 性能报告
  performance: {
    hints: "warning", // enum
  },
  // source map 如何生成，调试便利和编译速度如何权衡
  devtool: "source-map",
  // 配置 webpack-serve
  serve: {
    port: 1337,
    content: "./dist"
  },
  // 精确控制命令行输出日志
  stats: "errors-only",

  // webpack-dev-server 配置
  devServer: {
    proxy: {
      // 后端接口代理，可用于 mock 数据
      "/api": "http://localhost:3000"
    },
    contentBase: path.join(__dirname, "public"), // boolean | string | array, 静态文件目录
    compress: true, // 启用 gzip 压缩
    hot: true, // 模块热替换
    noInfo: true, // 热更新时仅输出错误和警告日志
    stats: { // 命令行日志信息
    },
  },

  // 插件配置
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
  ]
};
```
全部配置见[官方文档](https://webpack.js.org/configuration/)

快速生成自定义配置文件，可以用[官方推荐工具](https://generatewebpackconfig.netlify.com/)

# 打包输出目录优化

## 精简多余的目录

```js
// CSS 目录
const extractCSS = new ExtractTextPlugin({
  // filename: 'assets/css/[name].css',
  filename:  (getPath) => {
    return getPath('assets/css/[name].css').replace('views/', '');
  }
})

// HTML 目录
filename = filename.replace('views/', '')
const htmlConf = {
  filename: filename,
  template: path.replace(/.js/g, '.html'),
  inject: 'body',
  hash: true,
  chunks: ['commons', chunk]
}

// JS 目录
const _chunk = path.split('./src/pages/')[1].split('/app.js')[0]
const chunk = _chunk.replace('views/', '')
```


# 项目启动优化

From
```
npm start
```

To
```
# 自定义调试项目，customer 为项目的目录名字
npm start -- --index=customer
```

## 实现思路

想办法把 `openPage` 字段变成动态值

```
devServer: {
  open: true,
  openPage: 'mobile-intl/index.html',
}
```

## 如何实现

1. 传入参数
```bash
npm start -- --index=customer
```

```js
// package.json
scripts: {
  "start": "node ./tools/runDev.js",
}
```

2. Node.js 截取参数
```
let params = process.argv
```

3. 补全路径
```js
let indexPage = params.find(function(it) {
  return it.indexOf('--index=') > -1  // 找到起始页标识
})
...
let indexPath = indexPage.split('--index=')[1]
indexPage = 'mobile-intl/'+ indexPath +'/index.html'
```

4. 设置 webpack 参数
```js
let shell = require('shelljs');

let script = 'webpack-dev-server --open-page='+ indexPage +' --inline --hot --config build/webpack.dev.conf.js'
shell.exec(script)
```

# 添加路径别名

```js
alias: {
  '@': resolve('src'),
  'pages': resolve('src/pages'),
  'components': resolve('src/components'),
  'services': resolve('src/services')
}
```
```js
import { gtagPV } from '@/utils/gtag';
```

# 不同环境自动适配域名

原则上不允许硬编码域名，直接写路径 path，或者引入以下 JS 统一处理

```js
// 前端URL，直接写路径
window.location.href = '/helloworld/help/index.html'

// 后端接口
import conf from 'services/config'
console.log(conf.host)
```

webpack 在打包时会自动对域名相关信息进行替换。

## 如何实现

1. 针对不同环境，使用不同的配置文件，比如：config.js，config-qa.js

**保证所有配置文件导出的参数名保持一致**
```
// dev 测试环境配置
let baseUrl = 'dev.xxx.com'  // 服务端接口环境
let host = '//'+ window.location.hostname  // 前端网页域名

export default {
  baseUrl,
  host
}
```

2. webpack 通过 `NormalModuleReplacementPlugin` 插件完成替换
```js
const prodWebpackConfig = merge(webpackConfig, {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(
        /services\/config\.js/, // services 目录默认配置文件
        './config-qa.js'  // 替换配置文件
      )
    ]
  })
```

# 接口请求完善

1. 编写通用拦截器

```js
// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 自动添加 token 之类的通用参数
  return config;
}, function (error) {
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function (response) {
  // 处理一些通用响应，比如 200，401之类
  return response;
}, function (error) {
  return Promise.reject(error);
});
```

使用时引入一次拦截器，发起请求同 axios API

```js
import axios from 'services/axios'
axios.get('/api?param=value')
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
```

2. 请求方法封装

```js
import { postFromData } from 'services/axios'
// postFromData：post 请求以 form 表单形式发送数据，默认为 JSON
postFromData.then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
})
```

# 服务器部署优化

## 优化效果

![mobile-intl-deploy](https://user-images.githubusercontent.com/1567277/44394423-bdd80480-a569-11e8-9aa2-9941c4547a68.png)

```bash
# 单独打包
npm run buildDev        // 打 dev 环境包
npm run buildQa         // 打 QA 环境包
npm run buildPre        // 打仿真环境包
npm run buildOnline     // 打线上环境包

# 单独部署
npm run dev         // 部署 dev 测试环境
npm run qa          // 部署 QA 测试环境
npm run pre         // 部署仿真测试环境
npm run online      // 部署线上环境

# 打包 + 部署快捷方式
# 第一个参数为打包所用的 server 接口环境，第二个参数为服务器部署环境
# 两个参数的可选值均为：dev || qa || pre || online
# 调用方式一
npm run deploy -- --buildEnv=dev --deployEnv=qa
# 调用方式二
npm run deploy -- dev qa
```

## 如何实现

1. 创建通用的 webpack 配置：`webpack.cust.conf.js`，处理各个环境的打包逻辑
```js
// exports function 能接收参数
module.exports = function(env, argv){
  // 根据 npm run script 传入的参数判断环境
  let apiEnv = env.serverApi || 'dev'
  if (apiEnv === 'dev'){
    // 做点啥
  }
}
```


2. npm script 传入 webpack 参数：`serverApi`，实现环境自定义
```js
"scripts": {
  "buildDev": "webpack --env.serverApi dev --mode production --progress --color --config build/webpack.cust.conf.js",
  "buildQa": "webpack --env.serverApi qa --mode production --progress --color --config build/webpack.cust.conf.js",
}
```

3. npm script 传入 node 参数：`env`，实现部署服务器自定义
```js
"scripts": {
  "dev": "node deploy.js --env=dev --color=always",
  "qa": "node deploy.js --env=qa --color=always",
}
```
```js
// deploy.js 为部署脚本
let envParam = process.argv[2].slice(6)  // 裁掉 --env= 获取环境参数
let deployEnv = envParam || 'dev' // 服务器环境
```


# 初始化项目脚手架

## 初始化项目结构

- 单页项目模板 ```/src/pages/singlePage```
- 多页项目模板 ```/src/pages/multiPage```

**根据提问完成项目初始化**

```bash
npm run initApp
```

## 如何实现

>并没用[Yeoman](http://yeoman.io/)

关键工具
- 命令行交互：[inquirer](https://github.com/SBoudrias/Inquirer.js/)
- 下载 git 库：[download-git-repo](https://github.com/flipxfx/download-git-repo)

### 提问交互

```js
const askQuestion = async () => {
  // 模板类型
  let { templateType } = await inquirer.prompt([
    {
      type: 'list',
      name: 'templateType',
      message: 'Which template do you want?',
      choices: [
        {
          name: 'SPA (Single page)',
          value: 'SPA'
        }
      ]
    }
  ])

  // 项目名称
  let { projectName } = await inquirer.prompt([
    {
      name: 'projectName',
      message: 'What\'s the project name',
    }
  ])
}

askQuestion().catch((err) => {
  console.log('init project err: ', err)
})
```

### 拷贝工程模板

```js
let shell = require('shelljs');
let sourcePath = '../src/pages/singlePage'
shell.cp('-R', sourcePath, '../src/pages/newProject');
```

### 打包时排除模板目录

```js
glob.sync('./src/pages/**/app.js', {
  // 忽略项目模板目录
  ignore: ['./src/pages/singlePage/**', './src/pages/multiPage/**']
}).forEach(path => {
  // do something
})
```

### 独立脚手架模板

可以利用 [download-git-repo](https://github.com/flipxfx/download-git-repo)，把项目模板从 github 下载下来

# 命令行日志美化

关键工具

- [chalk](https://github.com/chalk/chalk)
- [signale](https://github.com/klauscfhq/signale)

### 遇到的坑

使用 shelljs 库执行的时候，命令行的样式失效，[issue 在此](https://github.com/shelljs/shelljs/issues/86)

### 解决办法

强制启用命令行样式

- webpack 加 `--color`
```
webpack --env.serverApi dev --mode production --progress --color --config build/webpack.cust.conf.js
```

- Node 加 `--color=always`

```
cd ./tools && node deploy.js --env=dev --color=always
```

### 自定义日志输出样式

参考了 [signale](https://github.com/klauscfhq/signale) 的样式，直接用它也没问题

```js
const chalk = require('chalk');
// log with chalk
const chalkLog = function(options){
  options = options || {
    color: 'red',  // chalk color
    label: 'my-project',
    badge: '🎉',
    tag: 'tag',
    msg: 'some log msg',
  }
  let logLabel = options.label || 'my-project'
  let logColor = options.color || 'black'
  const logTxt = chalk.gray('['+ logLabel +'] > ') + chalk[logColor](''+ options.badge +' ') + chalk.underline(chalk[logColor](options.tag)) +'  '+ options.msg

  console.log(logTxt)
}
```





Provide feedback

Saved searches

Use saved searches to filter your results more quickly

基于 webpack 的多页应用框架优化 #6

mobile-intl 框架起源

基础 webpack 配置

配置文件

打包输出目录优化

精简多余的目录

项目启动优化

实现思路

如何实现

添加路径别名

不同环境自动适配域名

如何实现

接口请求完善

服务器部署优化

优化效果

如何实现

初始化项目脚手架

初始化项目结构

如何实现

提问交互

拷贝工程模板

打包时排除模板目录

独立脚手架模板

命令行日志美化

遇到的坑

解决办法

自定义日志输出样式

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

基于 webpack 的多页应用框架优化 #6

Description

mobile-intl 框架起源

基础 webpack 配置

配置文件

打包输出目录优化

精简多余的目录

项目启动优化

实现思路

如何实现

添加路径别名

不同环境自动适配域名

如何实现

接口请求完善

服务器部署优化

优化效果

如何实现

初始化项目脚手架

初始化项目结构

如何实现

提问交互

拷贝工程模板

打包时排除模板目录

独立脚手架模板

命令行日志美化

遇到的坑

解决办法

自定义日志输出样式

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions