目录
第一篇:初始化项目
第二篇:代码规范
第三篇: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 命令看看效果把。