关于Webpack

[wanjun927]

webpack的能力：

1. 编译代码能力。提高效率，解决浏览器兼容问题(能够将 es6 编译成 es5)
2. 模板整合能力。提高性能，可维护性，解决浏览器频繁请求文件的问题(将js文件打包成一个 bundle.js文件)
3. 万物皆可模块能力。项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制

常用的 loader

在webpack内部中，任何文件都是模块，不仅仅只是 js 文件。默认情况下，在遇到 import 或者 loader 加载模块的时候，webpack只支持对 js 文件打包。像 css、html、png等这些类型文件的时候，webpack则无能为力，这时候就需要配置对应的 loader 进行文件内容的解析

• style-loader: 将 css 添加到DOM的内联样式标签 style 里
• css-loader: 允许将 css 文件通过 require 的方式引入，并返回 css 代码
• less-loader: 处理less
• sass-loader: 处理 sass
• postcss-loader: 用 postcss 来处理 css
• autoprefixer-loader: 处理 css3 属性前缀（已弃用，建议直接使用 postcss）
• file-loader: 分发文件到 output 目录并返回相对路径
• url-loader: 和 file-loader 类似，但是当文件小于设定的 limit 时，可以返回医德 Data Url
• html-minify-loader: 压缩 html
• babel-loader: 用 babel 来转换 es6 文件大 es5

loader 和 plugin 的区别

• loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译，压缩等，最终一起打包到指定的文件中
• plugin 赋予了webpack各种灵活的功能，例如打包优化，资源管理，环境变量诸如等，目的是解决 loader 无法实现的其他事情

参考链接
常用 loader 参考链接