webpack 常识

  • __dirname: The directory name of the current module.
  • __filename: The file name of the current module.


webpack-dev-server Diagram

webpack-dev-server Diagram

What’s the webpack-dev-server?

The webpack-dev-server is a little Node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. - quoted from webpack official document


  • 提供静态文件(主要功能)
  • mock接口(支持请求穿透(Bypass)、不应用于处理复杂的逻辑)
  • 请求代理转发(类似nginx的路由匹配、路由重写、https证书支持)


  • webpack-dev-server只用于提供静态文件服务,一般不应用于做为后端服务(*Its only purpose is to serve static (webpacked) assets, you should not use the webpack-dev-server as a backend. *)
  • 区分两种自动刷新模式(Automatic Refresh)
    • Iframe mode (page is embedded in an iframe and reloaded on change)
    • Inline mode (a small webpack-dev-server client entry is added to the bundle which refreshes the page on change)



  • Two Quick Ways To Reduce React App’s Size In Production - UglifyJsPlugin, dynamic gzip by Express pulgin compression, Build time gzip by Webpack pulgin CompressionPlugin.
  • Straightforward code splitting with React and Webpack - compress common libraries into vendor, code splitting through import.
  • 代码分割的关键在于分块标记以及如何进行分块。
  • Code Splitting - webpack Official, There are three general approaches to code splitting available:
    • Entry Points: Manually split code using entry configuration.
      • 两个块可能含有相同的依赖包,但这一点可以通过webpack.optimize.CommonsChunkPlugin来优化
      • 不够灵活,只能在打包的时候进行分割
    • Prevent Duplication: Use the CommonsChunkPlugin to dedupe and split chunks.
    • Dynamic Imports: Split code via inline function calls within modules.
      • 使用 import('path/to/module') -> Promise(注意:importimport()是不一样的),例如: import('lodash').then(_ =>{ // Do something with lodash (a.k.a '_')... })
      • The ES2015 Loader spec defines import() as method to load ES2015 modules dynamically on runtime, detail:Module API - Methods

Robin on 02 August, 2017

- - - - - -
written by 陈烨彬 Robin Chen , and published under (CC) BY-NC-SA.