前言

最近项目所需，所以开始学习并且使用 APICloud 此款 hybrid APP 开发框架。粗略的看了下文档和部分 Demo 后，已经对 APICloud 开发有一定基础的了解。在这种过程令我有一点疑惑，APicloud 的开发流程和普通的 Web APP 开发其实是很相似的，但是却没有对目前主流的构建工具有先关的教程。我发现虽然官方提供了一个 apicloud-polyfill 的功能，但是只是为了解决在项目中使用 ES6 的问题，而且整个 demo 的开发体验并不好，每次修改代码需要不停的构建在增量更新。随着项目的复杂起来，以及对一些前端新特性的依赖，所以我打算自己动手弄一个适合 APICloud 使用的 Webpack 模板。

项目结构

APICloud 的开发模式其实就是以前的使用 jQuery 的 MPA 开发一样，而且官方不推荐使用 SPA 的开发模式。

|- dist
|- lanuch
|- src
    |- pages
        |- Foo
            |- index.js
            |- index.htML
    |- image
    |- css
    |- scripts
    |- index.js
    |- index.html
|- package.json
|- config.XMl
|- webpack.config.json
|- .babelrc
|- .gitignore
|- .syncignore
|- index.html

上面是我个人对 APICloud 项目的文件夹分类。所有的源码都存放在 src 文件夹内，Webpack 打包的主要目录也是 src。

这里规定了每一个单独的 HTML 页面都是需要一个 JavaScript 的入口文件，这也是为了使用 Webpack 进行多页面打包的基础。

Webapck 基础配置文件

在设定好目录结构之后，我们需要开始编写 Webpack 的 config 文件，配置相对来首都比较简单，所以我们就写在一个文件内既可。

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const glob = require('glob')

const paths = {}
const configs = []
const setPath = (item, type) => {
  const dirname = path.dirname(item)
  
  if (paths[dirname]) {
    paths[dirname][type] = item
  } else {
    paths[dirname] = {
      [type]: item
    }
  }
}

glob.sync('./src/**/*.js', { ignore: './src/script/*.js' }).forEach(item => setPath(item, 'script'))
glob.sync('./src/**/*.html').forEach(item => setPath(item, 'html'))

Object.keys(paths).forEach(key => {
  const distName = key.replace('src', 'dist')

  configs.push({
    entry: paths[key].script,
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, distName)
    },
    devtool: process.env.NODE_ENV === 'production' ? 'inline-source-map' : '#source-map',
    devServer: {
      host: '0.0.0.0',
      port: 8080,
      historyApiFallback: false,
      noInfo: true
    },
    resolve: {
      extensions: ['.js', '.vue'],
      alias: {
        '@': path.resolve(__dirname, 'src'),
        'vue$': 'vue/dist/vue.esm.js'
      }
    },
    module: {
      rules: [
        {
          test: /.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader'
        },
        {
          test: /.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        }
      ]
    },
    plugins: [].concat(
      [
        new HtmlWebpackPlugin({
          inlineSource: '.(js|css)$',
          template: paths[key].html
        })
      ],
      process.env.NODE_ENV === 'production' ? [
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"'
          }
        }),
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: true,
          compress: {
            warnings: false
          }
        }),
        new webpack.LoaderOptionsPlugin({
          minimize: true
        }),
        new HtmlWebpackInlineSourcePlugin(),
      ] : []
    )
  })
})

module.exports = configs

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress ",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "glob": "^7.1.2",
    "html-webpack-inline-source-plugin": "0.0.9",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.4",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "vue": "^2.4.2"
  }
}

在 Webpack 中我们导出的是一个 config 数组，通过扫描 src 文件下的 JavaScript 和 HTML 文件，获取它们的 path 信息，为每一个 JavaScript 进行打包。此外我们可能还需要忽略一些 JavaScript 文件。

在生产环境的构建下，我配置了将 css 和 JavaScript 都插入了 html 文件中，这又是官方的一种提倡做法。

估计上面的配置好后，设置两个 npm script 命令，方便开发使用：