webpack的工作流程-一一网

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

具体

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

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

module.exports = {
  entry: {
    app: ['babel-polyfill','./src/main.js']
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  // 排除模块，下面的模块不会编译到 webpack 打包后的文件中
    externals: {
    "vue":  "Vue",
    "vuex": "Vuex",
    "vue-router": "VueRouter",
    "lodash": "_",
    "echarts": "echarts"
    },
  plugins: [
    // 全局模块对象
    new webpack.ProvidePlugin({
      "Vue": "vue",
      "Vuex": "vuex",
      "VueRouter": "vue-router",
      "_": "lodash",
      "echarts": "echarts"
    })
  ],
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.scss/,
        loader: ['style','css','scss']
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}
复制代码

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