关于webpack:webpack-loader使用

35次阅读

共计 1966 个字符，预计需要花费 5 分钟才能阅读完成。

本节咱们来学习 webpack 中 loader 加载器的应用，那么什么是 loader 呢。从实质上来说，loader 就是一个 Node.js 模块，在 webpack 的定义中，loader 导出一个函数，loader 会在转换源模块的时候调用该函数。

webpack 自身仍然是只能解决 JS 文件的，然而通过一系列的 loader，就能够解决其余文件啦。例如 Less 和 Sass，以前咱们编译这些 CSS 预处理器，须要应用 gulp 进行编译，而显示能够通过 webpack 中的 loader 加载器来实现。

webpack 中有一系列的 loader，在理论我的项目中，咱们会依据不同的需要应用到不同的 loader。例如 webpack 中的一些常见 loader 如下所示：

css-loader：用于解决 css 文件，使得能在 js 文件中引入应用。
style-loader：用于将 css 文件注入到 index.html 中的 <style> 标签上。
less-loader：解决 less 代码。
sass-loader：解决 sass 代码。
postcss-loader：用 postcss 来解决 CSS 代码。
babel-loader：用 babel 来转换 ES6 文件到 ES5。
file-loader：打包图片，打包字体图标。
url-loader：和 file-loader 相似，然而当文件小于设定的 limit 时，能够返回一个 DataUrl（晋升网页性能）。
html-withimg-loader：打包 HTML 文件中的图片。
eslint-loader：用于查看常见的 JavaScript 代码谬误，也能够进行 ” 代码标准 ” 查看。

咱们能够在 webpack.config.js 配置文件中配置 loader，能够在 module.rules 中指定一个或多个 loader。

通过配置loader 的两个属性来实现：

test 属性：用来标识出应该被对应的 loader 进行转换的某个或多个文件。
use 属性：示意转换时要用哪个 loader。

示例：

例如默认状况下 webpack 只能打包 JS 文件，不能辨认其余例如 CSS、Less、image 等类型的文件，那么如果咱们想要打包 CSS 款式文件，能够在 webpack 中应用 loader 加载器，能够将一种文件转换为另一种文件，将 webpack 不能辨认的其它类型文件转换为 webpack 可辨认 JS 类型文件。

首先须要装置 style-loader 和 css-loader，装置命令如下所示：

npm install css-loader style-loader --save-dev

命令执行胜利后，这两个 loader 会主动增加到 package.json 的依赖中，如下所示：

"devDependencies": {
    "css-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
  }

而后在 webpack.config.js 中配置 loader，在 module 属性的 rule 属性中配置 loader 规定：

module:{
    rules:[{
        test:/.css$/,
        use:['style-loader','css-loader']
    }]
}

这里示意匹配所有 .css 后缀结尾的文件，通过 style-loader 和 css-loader 加载器进行转换后再编译。

而后咱们创立一个 xkd.css 文件，内容如下所示：

p{
    font-size: 12px;
    color: red;
}

并将 xkd.css 文件导入到 index.js 入口文件中：

document.write('你好，侠课岛！');

// 导入 CSS 文件
import "./xkd.css";

而后咱们执行打包命令后会从新生成打包文件，会发现 xkd.css 文件也胜利打包到 bundle.js 文件中。

这就是 loader 的根本应用流程，先装置loader，而后在配置文件中配置 loader，最初再进行打包就能够啦。

loader 反对链式调用，链中的每个 loader 会将转换利用在已解决过的资源上。一组链式的 loader 将依照相同的程序执行。链中的第一个 loader 将其后果传递给下一个 loader，依此类推。
loader 能够是同步的，也能够是异步的。
loader 运行在 Node.js 中，并且可能执行任何操作。
loader 也能够内联显示指定。
loader 能够通过 options 对象配置。
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还能够在 module.rules 中应用 loader 字段间接援用一个模块。
插件 (plugin) 能够为 loader 带来更多个性。
loader 可能产生额定的任意文件。