webpack打包文件build.js解读

webpack打包文件build.js解读，build.js通过package.json中的script来执行脚本：npm run build。一般build.js都是以下结构：

1. require('./check-versions')()

2.  

3. //process.env是一个包含用户环境信息的对象 NODE_ENV是用户自定义的变量，用来判断是开发环境还是生产环境

4. process.env.NODE_ENV = process.argv.splice(2)[0] == 'dev' ? 'development' : 'production'

5.  

6. var ora = require('ora') //ora:https://www.npmjs.com/package/ora ora包用于显示加载中的效果，类似于前端页面的loading效果

7. var rm = require('rimraf') //rimraf模块 以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件是否为空

8. var path = require('path') //导入node的path模块

9. var chalk = require('chalk') //地址：https://www.npmjs.com/package/chalk 导入chalk模块 用来改变文字颜色

10. var webpack = require('webpack')

11. var config = require('../config')

12. var webpackConfig = require('./webpack.prod.conf')

13.  

14. var spinner = ora(process.env.NODE_ENV == 'production' ? 'building for production...' : 'building for development...')

15. spinner.start()

16.  

17. //rm方法删除static文件夹

18. //path.join是将路径片段以'\'连接成新的路径，任何一个路径片段有错误就会报错

19. rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

20. if (err) throw err

21. //构建webpack

22. webpack(webpackConfig, function (err, stats) {

23. //停止动画

24. spinner.stop()

25. if (err) throw err

26. //process.stdout.write是标准输出，相当于console.log

27. process.stdout.write(stats.toString({

28. //增加控制卡颜色开关，即显示不同颜色的字体

29. colors:true,

30. //是否增加内置模块信息

31. modules:false,

32. children:false,

33. //允许较少的输出

34. chunks:false,

35. //不将内置模块的信息加到包信息

36. chunkModules:false

37.  

38. }) + '\n\n')

39. //编译退出

40. console.log(chalk.cyan(' Build complete.\n'))

41. console.log(chalk.yellow(

42. ' Tip: built files are meant to be served over an HTTP server.\n' +

43. ' Opening index.html over file:// won\'t work.\n'

44. ))

45. })

46. })

关于process.argv.splice(2)[0]定义环境：

• nodejs通过process.argv设置参数，进行定制化webpack编译

  命令行

  1. npm run build --dev

  2. npm run build --qa

  3. npm run build --production

  webpack.config.js

  process.argv.splice(2)[0] ;//dev ,qa,production