深入浅出Webpack 读书总结

use 属性的值需要是一个由 Loader 名称组成的数组, Loader 的执行顺序是由后到
前的:
每个 Loader 可以通过 querystring 的方式传入参数,例如 css-loader?
minimize 中的 minimize 告诉 css- loader 要开启 css 压缩,还可以通过 Object 实现,在源码中指定用什
Loader 去处理文件。以加载 css 文件为例,修改上面例子中的 main.j 如下:
require (’ style-loader! css-loader?minimize! ./main.css ’);


Dev Server 会启动 HTTP 服务器用于服务网页请求,同时会帮助启动
Web pack ,并接收 Webpack 发出的文件更变信号,通过 WebSocket 协议自动刷新网页做到实
时预览。


Webpack 在启动时会以配置里的 entry 为入口去递归解析出 try 所依赖
的文件,只有 entry 本身和依赖的文件才会被 Webpack 添加到监听列表里。而 indx. html文件是脱离了 JavaScript 模块化系统的,所以 Webpack 不知道它的存在


Webpack 支持生成 Source Map ,只需在启动时带上一devtool source-map参数。重启 DevServer 后刷新页面,再打开 Chrome 浏览器的开发者 具,就可以 Sources栏中看到可调试的源代码了


Webpack 在启动后会从 Entry里配置的 Module 开始,递归解析 Entry 依赖的所有 Module
每找到一个 Module ,就会根据配置的 Loader 去找出对应的转换规则,对 Module 进行转换后,
再解析出当前 Module 依赖的 Module 这些模块会以 Entry为单位进行分组, 一个Entry 及其
所有依赖的 Module 被分到 个组也就是 Chunk 。最后, Webpack 将所有 Chunk 转换成
文件输出。在整个流程中, Webpack 会在恰当的时机执行 Plugin 义的逻辑。

下面我们举一个实际的例子,带你一步步去实现一个插件。

该插件的名称取名叫 EndWebpackPlugin,作用是在 Webpack 即将退出时再附加一些额外的操作,例如在 Webpack 成功编译和输出了文件后执行发布操作把输出的文件上传到服务器。 同时该插件还能区分 Webpack 构建是否执行成功。使用该插件时方法如下:

是因为 En 的路径及其依赖的模块的路径可能采用相
对于 co ext 的路径来描述, context 会影响到这些相对路径所指向的真实文件。
·如果 entry 是一 string array ,就只会生成 Chunk ,这时 Chunk 的名
main
·如果 ntr object ,就可能会出现多个 Chunk ,这时 Chunk 的名称是
object键值对中键的名称。
一组 Loa er 的执行顺序默认是从右到左执行的,通过 nforce 选项可
以将其中 一个 Loader 的执行顺序放到最前或者最后
 
在导 入语句没带文件后缀时, Webpack 会自动带上后缀后去尝试访问文件是否存在。
resolv extensions 用于配置在尝试过程 中用到的后缀列表,默认是:
extensions : [ ’. ] S ,’. j son ]
也就是说,当遇到 require (’. data ’)这样的导入 语句时, Webpack 会先寻找./ data
js 件,如果该文件不存在 就去寻找 data .json 文件,如果还 找不到,就报错
假如我们想让 Webpack 优先使用目录下的 Typescript 文件,则可以这样配置:
extensions :[’ .ts ’,’. j 5 ’,’.
j son ’]
 
devServer.headers 配置项可以在 HTTP 响应中注入 一些 HTTP 响应头
 
DevS rv er 默认使用 HTTP 服务 能使用 HTTPS 服务。在某些情况下我 必须使用
HTTPS ,例如 HTTP2 rv ic Worker 就必须运行在 HTTPS 上。要 HTTPS
简单的方式是:
devServer: {
https : true
}
 
devServer.clientLogLevel 配置客户端的日志 等级,这会影响到我们在浏览器
发者工具控制台里看到的日志内容 clientLogLevel 是枚举类型,可取如下值
none error warning inf 。默认为 inf 级别,即输出所有类型的日志,设置成 one
时可以不输出任何日志。
 
通过 externals 可以告诉 Webpack JavaScript 运行环境中已经内置了哪些全局变
量,不 用将这些全局变量打包到代码中而是直接 使用它们
 
要让 Babel 正常运行 ,我们必
须先安装这个插件:
npm i -D babel-plugin-tra n sform-runtime
babel-plugin-transform-runtime Babel 官方提供的 个插件,作 用是减少
冗余的代码 B
TypeScript ( http ://www .type sc riptlang.org )是 JavaS ript 的一个超集,主要提供了类型
检查系统和对 ES6 语法的支持,但不支持新的 API 。目前没有任何环境支持运行原生的
Typescript 代码,必 须通过构建将它转换成 JavaScript 代码 后才能运行。
module.exports = {
  plugins:[
    // 在初始化 EndWebpackPlugin 时传入了两个参数,分别是在成功时的回调函数和失败时的回调函数;
    new EndWebpackPlugin(() => {
      // Webpack 构建成功,并且文件输出了后会执行到这里,在这里可以做发布文件操作
    }, (err) => {
      // Webpack 构建失败,err 是导致错误的原因
      console.error(err);        
    })
  ]
}

要实现该插件,需要借助两个事件:

  • done:在成功构建并且输出了文件后,Webpack 即将退出时发生;
  • failed:在构建出现异常导致构建失败,Webpack 即将退出时发生;

实现该插件非常简单,完整代码如下:

class EndWebpackPlugin {

  constructor(doneCallback, failCallback) {
    // 存下在构造函数中传入的回调函数
    this.doneCallback = doneCallback;
    this.failCallback = failCallback;
  }

  apply(compiler) {
    compiler.plugin('done', (stats) => {
        // 在 done 事件中回调 doneCallback
        this.doneCallback(stats);
    });
    compiler.plugin('failed', (err) => {
        // 在 failed 事件中回调 failCallback
        this.failCallback(err);
    });
  }
}
// 导出插件 
module.exports = EndWebpackPlugin;
Web pack 个庞大的 Node. 应用,如果阅读过它的源码,则我们会发现实现 个完
整的 Webpack 要编写非常多的代码 但我们无须了解所有细节,只需了解其整体架构和
部分细
对Webpack 的使用者来说, Webpack 个简单强大的工具;对 Webpack 的开发者来
说, Webpack 个扩展性高的系统
Webpack 之所以能成功,在于它将复杂的实现隐藏了起来,向用户暴露的只是一个简单
的工具 ,让用户能快速达成目的 同时其整体架构设计合理且扩展性高,开发扩展难度不大,
通过社区 补足了大 的功能,使 Webpack 几乎能胜任任何场景。

猜你喜欢

转载自blog.csdn.net/taozi550185271/article/details/106191790