Open zhangzheng-zz opened 3 years ago
1、最基本的配置 loader 解析的文件匹配 exclude include 筛选。例如 babel-loader 只解析 src 目录的 js ts 文件
2、cache-loader 缓存打包结果。babel-loader 通过 cacheDirector 配置。
3、happypack 针对复杂项目多进程打包。注意进程管理也需要消耗时间。
4、uglifyjs-webpack-plugin image-loader extract-text-webpack-plugin 资源压缩 静态资源 publicPath CDN 引入
5、extract-text-webpack-plugin css分包
6、external 为 webpack 打包注入全局变量,例如 jq,不加入打包里面,使用 cdn 引入
7、自带的 tree-shaking 只针对 es6 模块
8、optimization splitChunks 多页面分包优化 vendors: 三方库 vue vue-router commom: 公共js minChunks: 2 // 最少引入两次 根据页面动态配置 getPage() / 3
hmr
babel
babel 插件编写 访问者模式是一个对象,定义了用于在一个树中获取具体节点的方法。
路径 path 连接两个节点,访问者访问到的是 path path上有很多方法
插件顺序前往后排列。预设(插件组合)后往前。插件在 Presets 前运行。
webpack 插件 webpack 事件流 依赖于 tapable tapable 暴露了很多 hook基类,可以在实例上面通过tap注册事件,通过call调用。 webpack会暴露compiler核心基类,提供给开发者各个生命周期钩子, 插件通过钩子注册相应的事件来改变webpack输出结果。
一个插件是一个类,提供了apply方法,apply方法会被webpack调用并传入compiler对象。 我们可以通过在compiler的钩子上面注册事件并拿到compilation进行其他操作。
vue-loader 一个 webpack loader 解析 .vue 文件 css scope 1、selector解析.vue生成一个对象parts包含template、style、script 实际是调用vue的parse方法 2、style-compiler 交给webpack的样式loader处理,postcss-loader, scoped 的实现是添加data属性 3、babel-loader 根据lang属性解析js js也是交给webpack对应的loader