Webpack解释

文章目录

• • 1.什么是webpack
  • 2.认识 plugin

---

1.什么是webpack

本质上来讲，webpack 是一个现代的 javascript 静态模块打包工具。其他的打包工具 grunt、gulp

• 原本的 webpack ，就是使用比如 ES6 不支持，要转成 ES5
• 可以处理好各种模块化开发，并会处理好模块间的依赖关系
• webpack 必须依赖于 node 环境，node 的包主要依赖于cnpm (node packages manager)，做个就是管理 node
• 原本的webpack 只能根据js 文件，进行打包，其他的文件例如 css 打包不了，这个时候，他需要依赖于第三方的包 loader，css-loader 只能解析 css 文件，如果要把 css 文件插入 html 文件中，还需要使用 style-loader ,
• 图片等文件的加载，需要使用 file-loader 这个包，这个包，他会小于 limit 大小的图片，转换成 base64的码，如果是大于这个大小的，就直接存原文件

---

2.认识 plugin

• loader 用于转换某些类型的模块
• plugin 是一个插件，它是对webpack 本身的扩展（比如，版权声明插件）
• 常用的比如 版权声明插件
• htmlwebpack，用来I生成 index.html 函数
• uglifywebapck ，丑化插件，使用这个插件，就表示将 js 代码给丑化了，相当于把原本的一些比较长的中间值变量，给他改掉了。