webpack、loader

webpack

webpack 是一个静态模块打包工具;webpack 处理应用程序时,会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将项目中所需的每一个模块组合成一个或多个 bundles 导出。

webpack的核心概念有如下:

入口(entry)指定 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始

输出(output):指定 webpack 在哪里输出所有创建的 bundle,以及如何命名这些文件

loader用于在打包过程中对源代码进行转换,简单来说每一个loader其实就是一个函数,打包过程中所有的loader按顺序逐个执行,以完成对文件的各种处理转换;

插件(plugin)loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务,包括:打包优化、资源管理、注入环境变量等;

模式(mode):配置项mode用于告知 webpack 使用相应模式的内置优化,常用的模式有:development、production、none等,mode为node时表明不使用任何优化;


中文官网:https://webpack.docschina.org/concepts/


常见loader

css-loader : 用于将 CSS 转成 CommonJS 模块,其原理是解析页面中以 import 、require、@import、url 等方式从外部引入的CSS文件内容,并这些外部引入的CSS文件内容转为JS数组或对象,以便下一步通过 style-loader 直接这些CSS样式插入到页面 DOM 中;


style-loader : 可用于将 CSS 插入到 DOM 中,其原理是通过在DOM中插入 <style> 标签,并且将CSS 写入到 <style> 标签内;此举可减少CSS文件的请求数,但会增加HTML文件的体积;style-loader灵活可配,也可设置引入外部CSS,如下:

<link rel="stylesheet" href="f2742027f8729dc63bfd46029a8d0d6a.css">


sass-loader : 用于将 Sass 语法编译成 CSS;

举报

© 著作权归作者所有


0