less loader 打包后样式丢失_webpack实战——预处理器(loader)【下篇】

写在前面

这是webpack实战系列笔记的第6篇记录，前几篇记录如下：

• 打包第一个应用
• 模块化与模块打包
• 资源输入与输出
• 一切皆模块
• 预处理器【上篇】

在上一篇中根据一切皆模块的思想，学习了解了loader：概述、引入、配置及使用。本篇接着上篇的话题，讲述常用loader。

在我们项目开发中，尤其是目前流行的单页面应用，一些新手经常会在loader配置中有一些疑问，比如：

• 对于xx资源应该使用哪个loader？
• 实现xx功能配置哪个loader？
• ...

常用loader介绍

其实，在社区上每天都会有很多loader发布，开发者在选择loader的时候要多读一下loader文档，了解loader用法，优缺点，然后根据需求去挑选。接下来介绍几种常用loader。

1. babel-loader

作用

“

babel-loader是用来处理ES6+并将其编译为ES5

安装

npm install babel-loader @babel/core @babel/preset-env

看这条安装指令，有几个参数，代表着什么呢？

• babel-loader：它是使Babel与Webpack协同工作的模块
• @babel/core：Babel编译器的核心模块
• @babel/preset-env：Babel官方推荐的预置器，可根据用户设置的目标环境自动添加所需要的插件和补丁来编译ES6+代码

示例

当然，知道了参数，也需要根据loader文档注意一些小细节，例如：

rules: [
    {
     
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
     
            loader: 'babel-loader',
            options: {