今天项目UAT打包生产啦，于是想着梳理一下run DEV和build 的流程

Webpack

核心理念

• entry 一个可执行模块或库的入口文件。
• Module，模块，在Webpack中一切皆模块，一个模块即为一个文件。Webpack会从Entry开始递归找出所有的依赖模块。
• chunk 多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。
• loader 文件转换器，例如把es6转换为es5，scss转换为css。
• plugin 插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。
• Output，输出结果，源码在Webpack中经过一系列处理后而得出的最终结果。

构建流程

• 以entry作为入口文件
• 找到依赖的module，Module.rules里配置的Loader规则进行相应的转换处理
• 对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk
• 一个Chunk，就是一个Entry及其所有依赖的Module合并的结果
• Webpack会将所有的Chunk转换成文件输出Output

VUE-npm run dev

npm run dev

• 在package.json 中，scripts 包含了改项目支持的命令配置，run dev 就会走 "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

• 其中的webpack-dev-server, 是一个用来快速搭建本地运行环境的工具

webpack.dev.conf.js

• devWebpackConfig 会merge过来基础的webpack配置baseWebpackConfig
• baseWebpackConfig 就是如上第一段说的标准的Webpack文件，包含入口文件、Module、Module的规则
• 能看到入口文件是main.js

entry: {
    app: ['babel-polyfill', './src/main.js']
  },

• 随后，使用HtmlWebpackPlugin 来创建index.html 入口文件；也就是说，如果多页页面，则能在这里进行页面名称的更改和管理？TODO

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

App.vue

• main.js文件中引用了App.vue和router。
  
• 所有通过router返回的vue都会填充在这个元素里面。

VUE-npm run build

run build

• "build": "node build/build.js" 指向build.js
  

• 其中 rimraf 的作用：以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除，也就是删除打包dist中原来打包的内容

  • api：rimraf(f, [opts], callback)

• 流程和上述DEV差不多，但是prod的Webpack config文件中多了output的输出，作为文件打包