Webpack5+vscode搭建kintone开发环境(三)Webpack 基本配置

cybozu发表于:2021年01月07日 14:17:54更新于:2021年07月28日 14:30:33

目录

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


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。