webpack

webpack is a static module bundler for modern JavaScript application

为什么要用webpack

https://webpack.js.org/concepts/why-webpack/

• 最直接的反应, 我要用es module
• 假设什么构建, 打包工具都不用, 要写一个网页, 直接在html文件里引入一堆script标签和link标签

各种各样的资源文件 => 宿主环境/浏览器能识别的资源

core concepts

https://webpack.js.org/concepts/
什么鬼都是一个模块

entry

main

output

dist
实际上到底得到了哪些代码 https://webpack.js.org/concepts/manifest/

between entry and output

• loader, transformer, 变形金刚, anything => js, https://webpack.js.org/concepts/loaders/
  css-loader vs style-loader
• plugin
  在webpack提供的生命周期里干预构建的流程, 就像在componentDidMout里做点什么骚操作
  前台那个加 loading 的插件, html-webpack-plugin, DefinePlugin

mode, development(文件直接放内存) vs production

how to use

• configuration file, 讲怎么配
• scripts/js api

很像一个组件, 提供了声明式(Declarative) 和命令式(Imperative)的api

<message>hello world</message>
this.$message('hello world')

after basics

• for dev: hmr(hot module replacement)
• for prod: code splitting(多个bundle), tree shaking, lazy loading 复用/抽象有成https://juejin.im/post/5a5652d8f265da3e497ff3de

trivia

• public path https://webpack.js.org/guides/public-path/, devServer.publicPath and ouput.publicPath
• target