目录

第一篇:初始化项目
第二篇:代码规范
第三篇:Webpack 基本配置
第四篇:开发环境设置
第五篇:生产环境设置
第六篇:css、less、scss、图片支持
第七篇:IE11 兼容
第八篇:支持 React
第九篇:支持 Typescript>
第十篇:命令行工具

webpack5

如果需要把多个 js 打包成一个的话，就需要使用 webpack，webpack 的当前最新版本为 webpack5+

安装：

npm install webpack webpack-cli -D

接着我们在根目录下新建文件夹 config，并新建 3 个 js 文件

├── config
│   ├── webpack.common.js
│   ├── webpack.dev.js
│   └── webpack.prod.js

在 webpack.common.js 中输入

const { resolve } = require('path')

module.exports = {
  entry: {
    app: resolve(__dirname, '../src/index.js'),
  },
  output: {
    filename: `js/[name].[contenthash:8].js`,
    path: resolve(__dirname, '../dist'),
  },
}

• entry：程序入口，这里指向 src 目录下的 index.js

• output：输出，输出文件到 dist 目录下的 js/app.${hash}.js

使用

在根目录下新建 src 目录，作为我们的开发目录，并在该目录下新建 index.js

└── src
    └── index.js

在 index.js 中输入：

kintone.events.on('app.record.index.show', (event) => {
  const root = kintone.app.getHeaderSpaceElement()
  root.innerHTML = 'hello, kintone!'
  return event
})

在根目录的 package.json 文件的 scripts 节点下输入：

{
  //others
  "scripts": {
    "build": "webpack --config ./config/webpack.common.js"
  },
  //others
}

我们可以在终端输入 npm run build 来启动webpack，并使用 config 目录下的 webpack.common.js 作为配置文件。

在终端中输入：

npm run build

你会看到在根目录下生成了新的 dist 目录：

├── dist
│   └── js
│       └── app.02f27d6f.js

其中 app.${hash}.js 内容如下：

kintone.events.on('app.record.index.show',(e) => ((kintone.app.getHeaderSpaceElement().innerHTML = 'hello, kintone!'), e),)

其实就是 index.js 的内容并做了压缩。

区分开发环境及生产环境

我们需要分别配置开发与生产环境，以适应不同的需求。

比如在开发环境中，代码不能压缩混淆，报错要能定位到源代码的具体位置。

而在生产环境中，我们要对代码进行压缩混淆，以减少成品大小。

webpack-merge

虽然不同的环境要区分配置，但是又有非常多的基础配置是共通的，分别写到两份配置文件则过于冗余了。这时候就需要 webpack-merge。

安装

npm install webpack-merge -D

config 下的 webpack.dev.js 作为开发环境的配置文件，输入以下代码：

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'development',
})

config 下的 webpack.prod.js 作为生产环境的配置文件，输入以下代码：

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'production',
})

在 production 模式下，webpack 会对代码进行一些默认的优化配置，比如压缩混淆。

虽然都我们对生产/开发模式进行了分开配置，但是在公共配置中，还是可能会出现某个选项需要在不同的环境下要采用不同的配置。
比如 output 输出时，开发环境需要某个固定名字以方便调试，而生产环境需则要带上不同的 hash 值方便进行管理。

这时候再把 output 写到 2 份不同的配置文件中就不适合了，毕竟只有一个 name 字段需要区别配置。为此我们需要引入某个变量用以区分不同的环境。

cross-env

cross-env 可跨平台设置环境变量，

比如 Mac 上要使用 export NODE_ENV=development ，而 Windows 上则使用的是 set NODE_ENV=development。

有了 cross-env 就不用考虑这些差异性了。

安装：

npm install cross-env -D

修改 package.json 的 scripts 字段：

{
  //others
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },
  //others
}

其中

npm run start

对应开发模式

npm run build

对应生产模式

你可以在终端中分别运行这 2 条指令，然后去 dist 目录下查看生成的 app.${hash}.js 有什么区别。

有了 NODE_ENV 的设置，我们终于可以在 webpack.common.js 中使用变量来区分不同的环境：

const isDev = process.env.NODE_ENV !== 'production'

之前说过，在开发模式下输出的 js 不需要 hash 值，让我们修改 output 字段：

{
  //others
  output: {
    filename: `js/[name]${isDev ? '' : '.[contenthash:8]'}.js`,
    path: resolve(__dirname, '../dist'),
  },
  //others
}

运行 start 命令看看效果把。