携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天， 点击查看活动详情
Scratch3.0 二次开发系列，系列说明、Demo源码等请查看： 《Scratch3.0 二次开发——开篇》
这次核心介绍如何在 gui 项目按需修改 webpack 的配置文件。
PS：下文没有详细讲解 webpack 是如何配置的，适合对 webpack 配置有一定了解的同学阅读，具体配置细节可参考 demo-scratch-gui 项目源码，以及百度。
官方提供的
webpack.config.js
相对比较简单，可用，但有需要再优化优化。
梳理一下比较重要的几个需求：
修改 package.json 中 babel、webpack 相关的依赖
在根目录下新建 .webpack 文件夹
把 webpack 的所有配置项都放在这个文件夹中，里面核心是以下几个配置文件：
后面 4 个环境的配置文件，基本就只用于根据不同环境设置全局变量，当然，如果有其它配置的需要也可以单独写在各自的环境里面
PS：这里简单封装了一个 formatDefine 函数，核心作用是方便快速添加全局变量
function formatDefine(target) {
const result = {};
for (const key in target) {
const element = target[key];
if (typeof element === 'boolean' || typeof element === 'number') {
result[key] = element;
} else {
result[key] = JSON.stringify(element);
return result;
module.exports = formatDefine;
不加这个函数的话，在 webpack 中的 DefinePlugin 设置环境变量会比较麻烦，如下图
增加各个环境的构建脚本
"build:dev": "npm run clean && cross-env NODE_ENV=production MY_ENV=dev webpack --color --bail --progress --config .webpack/webpack.dev.js",
"build:test": "npm run clean && cross-env NODE_ENV=production MY_ENV=test webpack --color --bail --progress --config .webpack/webpack.test.js",
"build:uat": "npm run clean && cross-env NODE_ENV=production MY_ENV=uat webpack --color --bail --progress --config .webpack/webpack.uat.js",
"build:prod": "npm run clean && cross-env NODE_ENV=production MY_ENV=prod webpack --color --bail --progress --config .webpack/webpack.prod.js",
"start:dev": "cross-env NODE_ENV=development MY_ENV=dev webpack-dev-server --config .webpack/webpack.dev.js",
"start:test": "cross-env NODE_ENV=development MY_ENV=test webpack-dev-server --config .webpack/webpack.test.js",
"start:uat": "cross-env NODE_ENV=development MY_ENV=uat webpack-dev-server --config .webpack/webpack.uat.js",
"start:prod": "cross-env NODE_ENV=development MY_ENV=prod webpack-dev-server --config .webpack/webpack.prod.js",
通过上面几个步骤的修改，就实现了开头需求分析中希望达到的功能
区分多个环境的环境变量、根据不同环境设置全局变量
通过上述的 4 个环境的配置文件实现
通过 MY_ENV 全局变量识别当前处于哪个环境
4 个配置文件，对应的是 4 套构建命令，start:dev、start:test、start:uat、start:prod
将 scratch 和其它第三方库打包时独立出 js 文件出来
开启打包分析，查看打包出来的文件的大小、占比情况
通过 analyze 脚本使用
