webpack入坑之旅（二）loader入门

时间 2020-04-20

标签 webpack 之旅 loader 入门繁體版

原文原文链接

转自我的博客：原地址css

这是一系列文章，此系列全部的练习都存在了个人github仓库中：
vue-webpack，在本人有了新的理解与认识以后,会对文章有不定时的更正与更新。下面是目前完成的列表：vue

引子

在上一篇博客中咱们已经成功的把简单的事情变得复杂了，把咱们的只有几行代码的两个文件first.js、entry.js使用webpack进行文件打包生成了bundle.js。正则表达式

Webpack 能作的就是这样，只能处理 JavaScript 模块。npm

固然它若是能作的仅仅是这样，那它也就不可能这么火了=_=。因此它能够经过引入其余的loader，进而能够处理其它类型的文件。json

Loader能够理解为是模块和资源的转换器，它自己是一个函数，接受源文件做为参数，返回转换的结果。这样，咱们就能够经过require来加载任何类型的模块或文件，好比VUE、JSX、SASS 或图片。

先来看看 loader 有哪些特性？(网上复制的，不喜欢能够跳过。地址)

Loader能够经过管道方式链式调用，每一个loader能够把资源转换成任意格式并传递给下一个loader，可是最后一个loader必须返回JavaScript。
Loader能够同步或异步执行。
Loader运行在node.js环境中，因此能够作任何可能的事情。
Loader能够接受参数，以此来传递配置项给loader。
Loader能够经过文件扩展名（或正则表达式）绑定给不一样类型的文件。
Loader能够经过npm发布和安装。
除了经过package.json的main指定，一般的模块也能够导出一个loader来使用。
Loader能够访问配置。
插件可让loader拥有更多特性。
Loader能够分发出附加的任意文件。

根据上面说的loader的知识，就这样编译是确定不行的，因此咱们安装用来读取css文件的css-loader，再用 style-loader 把它插入到页面中。

在命令行中输入：

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

在package.json中，主要是devDependencies这个字段有了改变：

"devDependencies": {
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2"
}

固然你能够用一个更加方便的方式进行安装，能够直接在package.json中，添加相应的依赖（如上面的代码），以后的命令行中运行npm intall，它会自动帮咱们安装相应的依赖。

安装完毕。

仍是上一篇博客中的文件，来添加一个css文件。style.css,在里面添加

body {
    background: red;
}

修改咱们的entry.js，原文件不变，添加require("!style!css!./style.css");,用来引入咱们的css文件。

咱们继续编译:

webpack entry.js bundle.js

完成后，刷新咱们的页面，背景颜色是否是已经变成了红色了呢？

这就是咱们的loader的使用方式了。若是每次 require CSS 文件的时候都要写 loader 前缀!style!css!这样的东西，显然是一件很麻烦的事情。咱们须要它能够根据模块类型（扩展名）来自动绑定须要的 loader。

来看看更简便的方式，将 entry.js 中的 require("!style!css!./style.css") 修改成 require("./style.css") ，能够改变一个背景颜色让你更明显的查看到变化！而后执行：

webpack entry.js bundle.js --module-bind "css=style!css"

。。

。。。

没成功对吧!
由于!在命令行中具备特殊的含义，因此咱们须要对它进行转义操做。再来试试：

webpack ./entry.js bundle.js --module-bind "css=style\!css"

成功的话，应该能再次看到背景的变化。

虽然这样能够将多个css文件进行编译打包，可是总感受非常繁琐，我不想每次都运行那么一长串的命令怎么办？继续向下走吧。