【Webpack】Webpack 入门以及常见 Loader 和常用插件的使用

1. Webpack属于模块化方案，它能让任意类型的文件运行在浏览器中，怎么做到呢？这时就有了 loader。

2. loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。

3. 常用的 loader 及其作用：

• style-loader：将CSS添加到DOM的内联样式标签style里
• css-loader：允许将CSS文件通过require的方式引入，并返回CSS代码
• less-loader：处理less
• sass-loader：处理sass
• postcss-loader：用postcss来处理CSS
• file-loader：分发文件到output目录并返回相对路径
• url-loader 和 file-loader 类似，但是当文件小于设定的limit时可以返回一个Data Url
• html-minify-loader：压缩HTML文件
• babel-loader：把ES6文件转换成ES5文件

4. loader 特性：

• loader 从右到左地取值(evaluate)/执行(execute)
• loader 支持链式传递
• loader 可以内联显示指定
• loader 可以是同步的，也可以是异步的
• loader 运行在 Node.js 中，并且能够执行任何 Node.js 能做到的操作
• loader 可以通过 options 对象配置
• 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
• loader 能够产生额外的任意文件

 

参考：

【重要】webpack 入门和常用插件的使用

Webpack有哪些常见的Loader？他们是解决什么问题的？

https://www.toutiao.com/i6674400183851155982/

END