webpack常用的加载器使用实例

1.前言

Webpack 想要实现的是整个前端项目的模块化，项目中的各种资源（包括 CSS 文件、图片等）都应该属于需要被管理的模块。换句话说， Webpack 不仅是 JavaScript 模块打包工具，还是整个前端项目（前端工程）的模块打包工具。也就是说，我们可以通过 Webpack 去管理前端项目中任意类型的资源文件。

因为 Webpack 实现不同种类资源模块加载的核心就是 Loader，所以今天我来和你聊聊 Webpack 的 Loader 机制。

2. CSS样式loader

首先，我们尝试通过 Webpack 打包项目中的一个 CSS 文件，由此开始探索 Webpack 是如何加载资源模块的？

在下面这个案例中，我们在项目的 css 目录下添加一个普通的样式文件 main.css，具体结构和样式代码如下所示：

 └─ 新建文件夹 ························ sample root dir
    ├── src ·································· source dir
    │   └── index.js ························· main js
 	├── css ·································· source dir
 	│   └── main.css ························· main css
 	├── index.html ····························main html
    ├── package.json ························· package file
    └── webpack.config.js ···················· webpack config file

下面给各个文件写入如下代码：
main.css:

h1 {
   
  position: absolute;
  left: 50%;
  transform: translate(0, -50%);
  color: red;
}

然后将 Webpack 配置中的入口文件路径指定为 index.js 的文件路径，让 Webpack 直接打包 js 资源文件，具体配置如下所示：

webpack.config.js :

const path = require("path");
module.exports = {
   
  entry: "./src/index.js",
  output: {
   
    filename: "webpack.js",
    path: path.join(__dirname, "dist"),
  }
};

因为我们要尝试打包相应的css文件，所以在index.js文件中引入main.css一同打包：

index.js:

import "../css/main.css";//引入css，这是css随着js打包的关键
function create() {
   
  var head = document.createElement("h1");
  head.textContent = "打包尝试";
  return head;
}
(function () {
   
  document.body.appendChild(create());
})();//自调用函数

下面我们尝试直接打包，显示错误：

错误信息大体的意思是说，在解析模块过程中遇到了非法字符，而且错误出现的位置就是在我们的 CSS 文件中。

出现这个错误的原因是因为 Webpack 内部默认只能够处理 JS 模块代码，也就是说在打包过程中，它默认把所有遇到的文件都当作 JavaScript 代码进行解析，但是此处我们让 Webpack 处理的是 CSS 代码，而 CSS 代码是不符合 JavaSc