中文
目录
第一篇:初始化项目
第二篇:代码规范
第三篇:Webpack 基本配置
第四篇:开发环境设置
第五篇:生产环境设置
第六篇:css、less、scss、图片支持
第七篇:IE11 兼容
第八篇:支持 React
第九篇:支持 Typescript>
第十篇:命令行工具
开发环境
顾名思义，这是给开发者使用的环境，在这个环境下编译出的代码需要能：
能快速定位bug
方便开发者调试
热更新，不需要重复执行编译指令
目前 kintone 自定义开发有以下 2 种调试方案：
启动一个本地的 https 服务器，然后将 https://localhost:8080/js/app.js 添加到自定义 js 中。
开启 webpack 的 watch 模式，每次修改完成后都会自动编译，然后利用 kintone-customize-uploader 自动上传到 kintone 上。
我这里使用了 webpack-dev-server 方案。
webpack-dev-server
到截稿为止 webpack-dev-server 的稳定版本为 3.11.0。
3系版本是针对 webpack4 推出的，在 webpack 5 下会存在一些问题。
而 webpack-dev-server 4 目前还是 beta 版本，并不稳定。默认配置也发生了很大的改变，因此在稳定版出来前并不推荐使用。
安装：
npm install webpack-dev-server -D
请确认自己的 webpack-dev-server 的版本。
3 系版本和 webpack-cli 冲突，因而无法使用 webpack-dev-server 命令启动。
对此官方的推荐解决案为：使用 webpack serve 来替代 webpack-dev-server。
修改 package.json 的 scripts 中的 start 命令：
{
//others
scripts: {
"start": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js",
//others
}
//others
}修改我们的 webpack.dev.js 文件，在 module.exports 字段下添加 devServer 配置：
const { resolve } = require('path')
const { readFileSync } = require('fs')
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
devServer: {
stats: 'errors-only',
clientLogLevel: 'silent',
compress: true,
disableHostCheck: true,
https: true,
key: readFileSync(resolve(__dirname, '../localhost+2-key.pem')),
cert: readFileSync(resolve(__dirname, '../localhost+2.pem')),
},
})stats：终端仅打印 error
clientLogLevel：日志等级
compress：gzip 压缩
disableHostCheck：bug 对应
https：开启 https
key：证书 key，指向根目录下的 localhost+2-key.pem 文件
cert：证书，指向根目录下的 localhost+2.pem 文件
https 证书
使用非安全证书是一件挺麻烦的事，chrome会一直和你确认安全问题。
使用 mkcert 可以非常简单的解决这一问题。安装方式就不在说明，请去官网查看。
在根目录下打开终端并依次输入
mkcert -install # 根据要求输入Password mkcert localhost 127.0.0.1 ::1
确保生成的 2 个证书文件名和 webpack.dev.js 中的 key 及 cert 字段的值一一对应。
热更新
webpack-dev-server 默认是开启了 watch 模式，也就是说你代码一旦修改就会完成自动编译。
如何自动把这些编译反应到画面呢？webpack-dev-server 提供了 LiveReloading 和 HMR 2种方式。
LiveReloading，自动刷新整个画面。和 HMR 互斥，只能开其一。3系下默认开启，4系下默认关闭。3系下，当webpack5 和 browserlist 共存时会存在bug。
HMR并不会刷新整个画面，而是只会对画面进行局部刷新的操作，即只更新变更部分。要启动它则需要设置hot 为true，并配合webpack.HotModuleReplacementPlugin使用。可惜的是，这一功能似乎需要配合html模版使用，在kintone上并没有成功。
devtool
devtool 中的一些设置，可以帮助我们将编译后的代码映射回原始源代码，这一功能被称为 source-map 。
webpack 提供了各种不同的 source-map 类型。它们的主要区别在于映射的结果及编译构建时的速度。
我个人习惯使用 eval-source-map。让我们修改 webpack.dev.js 文件：
//others
module.exports = merge(common, {
//others
devtool: 'eval-source-map',
//others
})通过上面配置，当我们在开发时出现了错误代码，控制台的错误日志就会精确地告诉你错误的代码所在的文件及位置信息。
