一文学会Webpack实用功能|加载器篇

Webpack 资源模块加载

通过探索我们知道可以把css文件作为打包的入口，不过webpack的打包入口一般还是JavaScript, 因为他的打包入口从某种程度来说可以算是我们应用的运行入口。

而就目前而言，前端应用当中的业务是由JavaScript去驱动的，我们只是尝试一下，正确的做法还是把js文件作为打包的入口。然后在js代码当中通过import的方式去引入css文件。

这样的话css-loader仍然可以正常工作，我们再来尝试一下。我们在js中import我们的css文件

import createHeading from './heading.js';import './style.css';const heading = createHeading();document.body.append(heading);

然后在webpack.config.js中配置css的loader 这里注意，css-loader 和 style-loader 要使用yarn安装到项目中。

yarn add css-loader style-loader --dev

webpack中的loader需要配置到config的module中。

const path = require('path');module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},module: {rules: [{test: /.css$/,use: ['style-loader','css-loader']}]}
}

完成之后我们打开命令行终端，运行一下打包命令。启动项目之后，我们发现，我们的样式是可以生效的。

传统模式开发我们是将文件单独分开单独引入，可是webpack确要求我们在js当中去引入css这到底是为什么呢。

其实webpack不仅仅是建议我们在webpack当中去引入css，而是建议我们我们在编写代码当中去引入任何你当前代码需要的资源文件。

因为真正需要这个资源的不是应用，而是此时正在编写的代码，是代码想要正常工作就必须要去加载对应的资源，这就是webpack的哲学，可能一开始不太容易理解，可以对比一下，假设我们的样式还是单独的去引入到页面当中，如果我们的代码更新了，不再去需要这个样式资源了，那又会怎么样。

所以说通过JavaScript的代码去引入文件或者建立我们js和文件之间的依赖关系是有一个很明显的优势的。

JavaScript的代码本身是负责完成整个业务的功能，放大来看就是驱动了我们整个前端应用，在实现业务功能的过程当中可能需要用到样式或者图片等等一系列的资源文件。

如果建立了这种依赖关系，一来逻辑上比较合理，因为我们的JS确实需要这些资源文件的配合才能实现对应的功能，二来我们可以保证上线时资源文件不缺失，而且每一个上线的文件都是必要的。

学习一个新事物不是学习用法就能提高，因为这些东西按照文档基本上谁都可以，很多时候这些新事物的思想才是突破点，能够搞明白这些新事物为什么这样设计，基本上才是出道了。

Webpack 文件资源加载器

目前webpack社区提供了非常多的资源加载器，基本上开发者能想到的合理的需求都有对应的loader，接下来我们来尝试一些非常有代表性的loader。

首先是文件资源加载器

大多数文件加载器都类似于css-loader，都是将资源模块转换为js代码的实现方式去工作，但是呢还有一些我们经常用到的资源文件，例如我们项目当中用到的图片或者字体，这些文件是没办法通过js的方式去表示的。

对于这类的资源文件，我们需要用到文件的资源加载器，也就是file-loader。

那文件资源加载器究竟是如何工作的？首先我们在项目中添加一张普通的图片文件，假设这张图片就是我们在实现某个功能时候需要的资源，按照webpack的思想，我们也应该在用到这个资源的地方去通过import 的方式去导入这张图片。让webpack去处理资源的加载。

我们这里需要接收一下模块文件的默认导出，我们导出的内容就是这张文件的资源路径。

我们创建一个img元素，把我们资源的路径也就是src设置成文件，最后再将这个元素append到body中


import createHeading from './heading.js';import './style.css';import icon from './icon.png';const heading = createHeading();document.body.append(heading);const img = new Image();img.src = icon;document.body.append(img);

因为我们导入了一个webpack不能识别的资源，所以我们需要修改webpack配置，首先需要安装额外的加载器file-loader

yarn add file-loader --dev

安装完成过后我们修改webpack的配置文件，为png文件添加一个单独的加载规则配置，test属性设置以.png结尾，use属性设置为刚安装的file-loader, 这样的话webpack在打包的时候就会以file-loader去处理图片文件啦。

const path = require('path');module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},module: {rules: [{test: /.css$/,use: ['style-loader','css-loader']},{test: /.png$/,use: 'file-loader'}]}
}

打包过后(yarn webpack) 我们发现dist目录中多了一个图片文件，这个文件就是我们刚刚在代码中导入的图片，不过文件名称发生了改变，这个问题以后再进行介绍。

这张图片在bundle中是如何体现的呢？打开文件之后我们发现，比较简单，只是把我们刚刚生成的文件名称导出了。

/* 6 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "e177e3436b8f0b3cfff0fd836ea3472c.png");/***/ })

然后我们看下入口木模块, 这里直接使用了导出的文件路径(__webpack_require__(6))
img.src = icon_png__WEBPACK_IMPORTED_MODULE_2_[“default”];

/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _heading_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_style_css__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _icon_png__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);const heading = Object(_heading_js__WEBPACK_IMPORTED_MODULE_0__["default"])();document.body.append(heading);const img = new Image();img.src = _icon_png__WEBPACK_IMPORTED_MODULE_2__["default"];document.body.append(img);/***/ })

我们启动这个应用，打开浏览器，发现图片并不能正常的加载，打开控制台终端我们可以发现，是直接加载了网站根目录的图片，而我们网站根目录并没有这个图片，所以没有找到。我们的图片应该在dist目录当中。

这个问题是由于我们的index.html并没有生成到dist目录，而是放在了项目的跟目录，所以这里把项目的跟目录作为了网站的跟目录，而webpack会认为所有打包的结果都会放在网站的跟目录下面，所以就造成了这样一个问题。

解决的方法非常简单，我们就是通过配置文件去告诉webpack，打包过后的文件最终在网站当中的位置，具体的做法就是在我们的配置文件当中的output位置，添加一个publicPath。

这个属性的默认值是一个空字符串，表示的就是网站的跟目录，我们这里因为我们生成的文件是放在dist目录下，所以我们设置为dist/。注意这里的斜线不能省略。

const path = require('path');module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist'),publicPath: 'dist/'},module: {rules: [{test: /.css$/,use: ['style-loader','css-loader']},{test: /.png$/,use: 'file-loader'}]}
}

完成以后我们重新打包，我们打开打包后的文件，找到图片对应的位置，我们发现，这一次在文件名称前面拼接了一个变量。

/* 6 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (__webpack_require__.p + "e177e3436b8f0b3cfff0fd836ea3472c.png");/***/ })

这个变量是在webpack内部的代码所提供的。我们可以在运行代码中找到这个变量，可以发现，这个变量就是我们在配置中设置的publicPath(_webpack_require_.p = “dist/”