将手写Webpack和手写loader结合使用

​ 在之前的文章中,我们手写了一个Webpack和独立的实现了style-loaderless-loader,在这里呢,我们准备把两个手写案例结合到一起,看看是否能够用我们手写的Webpack通过我们编写的loader来打包文件。

​ 让我们新建一个名称为webpackUseSelfLoader的文件夹,首先npm init一下,我们会获取到package.json的文件,然后我们按照之前的文件目录分别创建好我们的文件。然后安装一下less。我们在index.js文件中引入一下之前新建好的index.less文件。

Webpack

自定义loader

​ 在我们正式开始手写loader之前,我们先来看看loader到底是个什么东西:

loaderloader的本质其实就是一个导出为函数的一个js模块,该函数接收一个参数sourcesource的内容,compiler 需要得到最后一个 loader 产生的处理结果。这个处理结果应该是 String 或者 Buffer(被转换为一个 string),代表了模块的 JavaScript 源码。另外还可以传递一个可选的 SourceMap 结果(格式为 JSON 对象)。

Webpack

Webpack如何打包文件

在我们正式开始手写webpack之前,我们先来看看webpack是如何打包文件的,在之前的文章中,我们说过,如果想利用webpack来对我们的项目进行打包,可分为三个步骤:

  1. 我们需要安装webpack以及webpack-cli,这里需要我们注意一点的是,webpack-cli 建议安装3.x的版本,否则会出现其他异常问题(因为webpack5刚出来,可能是兼容没有做好);

  2. 我们需要指定配置文件名称需为webpack.config.js,在其内部进行webpack的配置;

  3. 最后我们通过命令 $ npx webpack 来对指定文件进行打包。

所以,综上所述webpack就是一个工具模块,提供了webpack指令,所以要想实现webpack必须先实现一个工具模块。

Webpack