Webpack知识体系 | 青训营笔记

沃德斌
47 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天.

什么是Webpack

本质上是一种前端资源编译、打包工具。

  • 多份资源文件打包成一个 Bundle
  • 支持Babel、Eslint、TS、CoffeScript、Less、Sass
  • 支持模块化处理css、图片等资源文件西支持 HMR＋开发服务器
  • 支持持续监听、持续构建支持代码分离
  • 支持Tree-shaking支持Sourcemap

使用Webpack

核心流程：

  1. 入口处理,从entry文件开始,启动编译流程
  2. 依赖解析，从‘entry文件开始，根据require or import等语句找到依赖资源
  3. 资源解析，根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
  4. 资源合并打包，将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

模块化+一致性：

  1. 多个文件资源合并成一个，减少http 请求数
  2. 支持模块化开发
  3. 支持高级JS特性
  4. 支持Typescript、CoffeeScript 方言
  5. 统一图片、CSS、字体等其它资源的处理模型

使用Webpack - 处理CSS

image.png

const styles = require( './index.css ' ); 
import styles from './index.css '

安装Loader

npm add -D css-loader style-loader

添加‘module’处理CSS文件

const path = require( "path" );
module.exports = {
entry: "./src/index" ,output : {
filename: " [name].js" ,
path: path.join( __dirname， "./dist" ) ,},
module: {
 //css处理器
 rules: [{
test: .css/i,
use: [
"style-loader" ,"css-loader"],
}],}，};

使用Webpack -什么是Loader

Webpack Loader最核心的只能是实现内容转换器——将各式各样的资源转化为标准JavaScript内容格式，例如︰

  • css-loader将css 转换为__WEBPACK_DEFAULT_EXPORT__- ". a{ xxx}”格式
  • html-loader将html转换为__WEBPACK_DEFAULT_EXPORT__ - "<!DOCTYPExxx”格式
  • vue-loader更复杂一些，会将.vue文件转化为多个JavaScript函数，分别对应template、 js. css、custom block

使用Webpack -如何编写Loader

Loader函数接收三个参数，分别为:

  • source:资源输入，对于第一个执行的loader为资源文件的内容;后续执行的loader 则为前一个loader的执行结果
  • sourceMap:可选参数，代码的sourcemap结构
  • data:可选参数，其它需要在Loader链中传递的信息，比如 posthtml/posthtml-loader就会通过这个参数传递参数的AST对象
  • 其中source 是最重要的参数，大多数Loader 要做的事情就是将source转译为另一种形式的output，比如webpack-contrib/raw-loader的核心源码:
/ f...
export default function rawLoader(source) {

const json = JSON.stringify(source).replace(/u2028/g,"\1u2028 ').replace(/u2029/g,"\1u2029');
const esModule =
typeof options.esModule !== 'undefined' ? options.esModule : true;
return `${esModule ? 'export default' : 'module.exports ='}$json}; ';
}
avatar
文章
阅读
粉丝