webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程

    • 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数
    • 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；
    • 确定入口：根据配置中的entry找出所有的入口文件；
    • 编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，在递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
    • 完成模块编译：在经过第四步使用loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
    • 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
    • 输出完成：再确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

    在以上系统中，webpack会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用webpack提供的API改变webpack的运行结果

    Webpack构建运行在node.js环境下，它的配置文件遵循CommonJS规范，webpack.config.js导出一个Object对象（或者导出一个Function，或者导出一个Promise函数，还可以导出一个数组包含多份配置）。Webpack从入口文件开始，识别出源码中的模块化导入语句，递归地找出所有依赖，然后把入口文件和所有依赖打包到一个单独的文件中(即一个chunk)，这就是所谓的模块打包。最新版的Webpack，已经支持了E6/CommonJS/AMD等模块化语句。

    什么是loader？
    Loader用于对模块文件进行编译转换和加载处理，在module.rules数组中进行配置，它用于告诉Webpack在遇到哪些文件时使用哪些Loader去加载和转换。Loader还可以通过querystring或object指定选项参数。

    什么是plugin?
    Plugin用于扩展Webpack功能，实现原理是在构建流程里注入钩子函数。在plugins数组中进行配置。

    关于DevServer：
    DevServer用于提供HTTP服务、监听文件变化并实时刷新页面、支持SourceMap以方便调试。

    六个核心概念：
    Entry，入口，这是Webpack执行构建的第一步，可理解为输入。
    Module，模块，在Webpack中一切皆模块，一个模块即为一个文件。Webpack会从Entry开始递归找出所有的依赖模块。
    Chunk，代码块，一个Chunk由多个模块组合而成，它用于代码合并与分割。
    Loader，模块转换器，用于将模块的原内容按照需求转换成新内容。
    Plugin，扩展插件，在Webpack构建过程的特定时机注入扩展逻辑，用来改变或优化构建结果。
    Output，输出结果，源码在Webpack中经过一系列处理后而得出的最终结果。

    Webpack构建流程：
    Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务。

    基础配置项：参考webpack官网配置项

    1. module.exports = {
    2.   context: path.resolve(__dirname, '../'),
    3.   entry: {
    4.     app: ['babel-polyfill','./src/main.js']
    5.   },
    6.   output: {
    7.     path: config.build.assetsRoot,
    8.     filename: '[name].js',
    9.     publicPath: process.env.NODE_ENV === 'production'
    10.       ? config.build.assetsPublicPath
    11.       : config.dev.assetsPublicPath
    12.   },
    13.   resolve: {
    14.     extensions: ['.js', '.vue', '.json'],
    15.     alias: {
    16.       'vue$': 'vue/dist/vue.esm.js',
    17.       '@': resolve('src')
    18.     }
    19.   },
    20.   // 排除模块，下面的模块不会编译到 webpack 打包后的文件中
    21.     externals: {
    22.     "vue":  "Vue",
    23.     "vuex": "Vuex",
    24.     "vue-router": "VueRouter",
    25.     "lodash": "_",
    26.     "echarts": "echarts"
    27.     },
    28.   plugins: [
    29.     // 全局模块对象
    30.     new webpack.ProvidePlugin({
    31.       "Vue": "vue",
    32.       "Vuex": "vuex",
    33.       "VueRouter": "vue-router",
    34.       "_": "lodash",
    35.       "echarts": "echarts"
    36.     })
    37.   ],
    38.   module: {
    39.     rules: [
    40.       ...(config.dev.useEslint ? [createLintingRule()] : []),
    41.       {
    42.         test: /\.vue$/,
    43.         loader: 'vue-loader',
    44.         options: vueLoaderConfig
    45.       },
    46.       {
    47.         test: /\.js$/,
    48.         loader: 'babel-loader',
    49.         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
    50.       },
    51.       {
    52.         test: /\.scss/,
    53.         loader: ['style','css','scss']
    54.       },
    55.       {
    56.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    57.         loader: 'url-loader',
    58.         options: {
    59.           limit: 10000,
    60.           name: utils.assetsPath('img/[name].[hash:7].[ext]')
    61.         }
    62.       },
    63.       {
    64.         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    65.         loader: 'url-loader',
    66.         options: {
    67.           limit: 10000,
    68.           name: utils.assetsPath('media/[name].[hash:7].[ext]')
    69.         }
    70.       },
    71.       {
    72.         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    73.         loader: 'url-loader',
    74.         options: {
    75.           limit: 10000,
    76.           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    77.         }
    78.       }
    79.     ]
    80.   },
    81.   node: {
    82.     // prevent webpack from injecting useless setImmediate polyfill because Vue
    83.     // source contains it (although only uses it if it's native).
    84.     setImmediate: false,
    85.     // prevent webpack from injecting mocks to Node native modules
    86.     // that does not make sense for the client
    87.     dgram: 'empty',
    88.     fs: 'empty',
    89.     net: 'empty',
    90.     tls: 'empty',
    91.     child_process: 'empty'
    92.   }
    93. }

    配置项说明：
    entry，指定了模块的入口，它让源文件加入构建流程中被webpack控制。
    output，配置如何输出最终的代码结果。
    module，配置各种类型的模块的处理规则和解析策略。
    rosolve，配置webpack寻找模块的规则。
    plugin，配置扩展插件，扩展webpack的更多功能。
    devServer，配置DevServer，实现本地http服务、模块热替换、source map调试等。