解决打包生成的map.js文件过大的问题

React脚手架 打包生成map文件体积过大

map文件是帮助我们查看报错的位置的。map文件由devtool属性控制

第一步：全文搜索devtool

发现在webpack.config.js文件 168 行的位置。这里不建议注释掉(虽然网络上有很多人这么说)。代码为：

devtool: isEnvProduction
    ? shouldUseSourceMap
      ? 'source-map'
      : false
    : isEnvDevelopment && 'cheap-module-source-map',
// 很容易发现是由`shouldUseSourceMap`变量控制的。

第二步：全文搜索shouldUseSourceMap

发现在 webpack.config.js文件 35 行的位置

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

这里发现，map文件是由process.env.GENERATE_SOURCEMAP控制的，当这个变量设置为trueorfalse时，对应的控制build出来的map文件，有 还是 无。

第三步：全文搜索process.env

主要是确认官方的脚手架，是否设置了环境变量，结果不出所料。在==scripts==文件夹内的三个build.js、start.js、test.js文件内均有变量设置。所以，我们只需要在打包的时候，设置这个属性就好了，即在build.js文件内，最上方加入一条 process.env.GENERATE_SOURCEMAP = 'false';即可

process.env.NODE_ENV = 'production';
process.env.GENERATE_SOURCEMAP = 'false';
// 为了不生成map文件
process.env.GENERATE_SOURCEMAP = 'false';