在前两篇文章中，我们介绍了 webpack 的基本概念和使用方法，以及如何使用插件来扩展 webpack 的功能。但是，在实际的开发中，我们经常需要使用一些非 JavaScript 的资源，例如 CSS、图片、字体等。在这种情况下，我们就需要使用 webpack 的 loaders 来处理这些资源。
什么是 loaders
loaders 是 webpack 的一个重要概念，它允许我们在打包过程中对各种类型的文件进行转换。loaders 可以将一个文件从不同的形式转换为 JavaScript 模块，这样我们就可以在 JavaScript 代码中引用这些文件，而不用手动复制和粘贴。
例如，我们可以使用 css-loader 和 style-loader 来处理 CSS 文件。css-loader 可以将 CSS 文件转换为 JavaScript 模块，而 style-loader 可以将这些模块插入到 HTML 中的 <style> 标签中。这样，我们就可以在 JavaScript 中引用 CSS 文件了。</p> <h2>如何使用 loaders</h2> <p>在 webpack 中使用 loaders 非常简单，只需要在配置文件中添加一个 module.rules 字段，然后在这个字段中配置各种类型的文件对应的 loaders 即可。</p> <p>例如，我们可以使用以下的配置来处理 CSS 文件：</p> <pre class="prettyprint javascript">-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- --------- ---- ---------------- -------------- -- -- -- --</pre><p>在这个配置中，我们使用了两个 loaders：style-loader 和 css-loader。这两个 loaders 的执行顺序是从右往左，也就是先执行 css-loader，再执行 style-loader。</p> <p>在这个配置中，我们还使用了一个 test 字段来匹配需要处理的文件。这个字段是一个正则表达式，它可以匹配所有以 .css 结尾的文件。如果需要处理其他类型的文件，我们只需要添加新的规则即可。</p> <h2>常用的 loaders</h2> <p>webpack 支持的 loaders 很多，下面是一些常用的 loaders：</p> <h3>css-loader 和 style-loader</h3> <p>这两个 loaders 可以让我们在 JavaScript 中引用 CSS 文件。</p> <pre class="prettyprint javascript">-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- --------- ---- ---------------- -------------- -- -- -- --</pre><h3>file-loader 和 url-loader</h3> <p>这两个 loaders 可以处理图片、字体等文件。</p> <p>file-loader 可以将文件复制到输出目录，并返回文件路径，而 url-loader 可以将文件转换为 base64 编码的字符串，直接嵌入到 JavaScript 中。</p> <pre class="prettyprint javascript">-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- ----------------------- ---- - - ------- ------------- -------- - ------ ----- -- -- -- -- -- -- --</pre><p>在这个配置中，我们将所有的图片文件转换为 base64 编码的字符串，如果文件大小小于 8KB，就直接嵌入到 JavaScript 中，否则就使用 file-loader 复制到输出目录。</p> <h3>babel-loader</h3> <p>这个 loader 可以将 ES6+ 的代码转换为 ES5 的代码，以保证在不支持 ES6 的浏览器中也能正常运行。</p> <pre class="prettyprint javascript">-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- -------- -------- --------------- ---- - ------- --------------- -------- - -------- ---------------------- -- -- -- -- -- --</pre><p>在这个配置中，我们使用了 babel-loader 来处理所有的 .js 文件，并使用 @babel/preset-env 来将 ES6+ 的代码转换为 ES5 的代码。</p> <h2>总结</h2> <p>loaders 是 webpack 的一个重要概念，它可以让我们在打包过程中对各种类型的文件进行转换。在实际的开发中，我们经常需要使用各种不同的 loaders 来处理各种不同的资源。在使用 loaders 的时候，我们需要注意 loaders 的执行顺序和配置规则，以保证打包过程的正确性和效率。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/65817565d2f5e1655dcb007d">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/65817565d2f5e1655dcb007d">https://www.javascriptcn.com/post/65817565d2f5e1655dcb007d</a></p> </blockquote>