【面试题】webpack打包原理

webpack是什么

• webpack就是一个模块打包器，根据模块建的关系，构建出一张依赖关系图，最后将所有模块打包成一个或多个js文件

---

Entry

• 打包入口，告诉webpack从那个文件开始

---

Output

• 打包出口：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值是 ./dist

---

Mode

• 打包模式development开发模式production生产模式

---

Loaders加载器

• webpack默认只能打包js文件，对于其他类型的文件必须用对应的加载器才能去打包比如
• 常见loader
  1. Sass-loader
  2. Less-loader
  3. Css-loader
• webpack默认只能识别es5代码以及部分es6语法，如果想全部识别打包es6语法，必须借助babel babel-loader进行降级

---

Plugins

• 排除loaders，其他都是插件做的事情
• 常见的插件
  1. Html-webpack-plugin
  2. Extract-text-plugin