webpack 04-creact-react-app 中webpack配置

脚手架工具creact-react-app 中webpack配置

脚手架工具，其实是node的一个程序，会帮我们初始化一个项目，包含项目的工程目录以及这个项目打包的webpack配置。

通过脚手架生成的工程会默认的webpack的配置都已经配置好了，但是把webpack相关的配置文件隐藏起来了，执行npm run build/start等命令时会调用这些隐藏的配置文件，来进行项目的打包，生成可以运行的代码。

脚手架提供了eject命令，可以将隐藏的webpack配置项展现出来，执行npm run eject 之后，项目目录会多出config及scripts文件夹：
<img src="https://tva1.sinaimg.cn/large/006y8mN6gy1g6zekelnxtj30j008kwew.jpg">

<p style="font-size:10px;">jest文件夹可以先删掉，涉及自动化测试相关知识。scripts中test.js涉及自动化测试命令，也可以先删掉。package.json中test、eject命令可以先删掉。</p>

npm run start

<p style="font-size:10px;">项目安装依赖失败的话，删除yarn.lock、node_modules文件，再执行npm install</p>

npm run start命令会启动一个服务器，webpack-dev-server，让在开发过程中可以实时调试，做热模块更新。

npm run build命令帮我们生成线上要运行的生产环境代码。

执行命令时
"start": "node scripts/start.js", "build": "node scripts/build.js",
通过node执行scripts下面的start.js/build.js文件。

build.js文件

env.js文件内容

L8 /config/env 文件：delete require.cache[require.resolve('./paths')];清paths中的缓存，使他能拿到paths中的最新内容
L10判断当前打包环境
L11打包中遇到异常，要抛出这个异常，而不是忽略他继续执行。
L17webpack打包的时候，可以配置很多的环境变量，在脚手架工具里，可以把环境变量配置在根目录下创建.env的文件，在该文件中去定义一些全局变量。

const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
  throw new Error(
    'The NODE_ENV environment variable is required but was not specified.'
  );
}

会去.env文件中读取这些全局变量，然后定义到打包的过程之中。

L52 获取当前文件的路径，把他定义到NODE_PATH下面，即定义一个全局变量NODE_PATH里面，存放当前项目所在的路径
L63提供一个方法，结合外部传进来的一个路径，对全局变量做一些整理，最终把他返回出去。

webpack.config.js文件内容

核心的webpack的配置内容
L136 return
1. mode根据isEnvProduction判断当前环境，webpackEnv
2. bail一旦在打包过程中遇到错误就及时停止，不再往下打包了，直接报错，（开发环境继续打包，线上环境停止打包）
3. devtool shouldUseSourceMap根据在全局变量中是否配置了GENERATE_SOURCEMAP
4. entry入口 path
5. output输出，线上环境方法哦appBuild文件夹下 pathinfo 把入口引入的其他模块的信息，通过注释的形式有所输出
6. filename chunkFilename如果是线上环境，就用chunkhash 开发环境直接使用static/bundle.js
7. devtoolModuleFilenameTemplate 通过sourcemap找到里面的依赖文件所在的disk（硬盘上）真正的路径位置，来定位到sourcemap中相应代码文件的行数，来帮助我们进行调错，解决sourcemap定位不准的问题（一些大型项目，应该配置此项）
8. optimization做优化或一些代码的压缩都放在该配置项里，取决于当前的环境；minimizer里配置了TerserPlugin插件，即压缩js的一个插件，里面做了一些配置，线上环境才会执行，开发环境无效
9. splitChunks默认webpack中的把node_modules中的东西单独打包，runtimeChunk把webpack runtime的代码单独打包生成文件
10. resolve
  1.modules 如果配置了modules是个数组，当你引入一个模块的时候，会到node_moduls中去找，还会到其他的modules去找。根据你的配置生成modules配置的数组，当引入一个模块的时候，会到数组里对应的文件夹里去找
  1. extension 根据文件后缀alias别名
  2. plugins 当引入一个其他模块的时候，resolve生效，定义的plugins生效
11. resolveLoader只用引入一些loader时才会执行
12. module strictExportPresence引入的模块必须明确地导出自己的内容
13. { parser: { requireEnsure: false } },不支持require.ensure，必须使用import进行异步代码的加载
14. enforce: 'pre',在loader前用eslint对代码做检测
15. oneOf 当我们打包文件的时候，会到下面逐个的去找loader，直到找到一个为止（图片，如果是个图片文件，通过url-loader对图片打包，如果小于10kb时放到base64里，如果大于10kb直接把文件拷贝过去）

build.js文件内容

L15引入dev文件，执行该文件，对一些打包过程中要用到的全局变量进行赋值
L18
1. path 核心模块
2. chalk让命令行的提示更加美观的工具
  3.L22 webpack.config文件 return的就是build拿到的文件
L47 configFactory 得到打包所需要的webpack配置内容，

path.js打包的一些路径信息
env.js帮助初始化运行环境的文件
webpackDevServer.config

start.js文件：开发环境，遇到问题及时报错