呢呢 Blog 呢呢 Blog
首页
  • 前端

    • web Worker使用笔记
  • 博客搭建

    • 快速上手
文集
  • 前端公用方法
关于
  • 网站
  • 资源
  • Vue资源
  • 友情链接
GitHub
首页
  • 前端

    • web Worker使用笔记
  • 博客搭建

    • 快速上手
文集
  • 前端公用方法
关于
  • 网站
  • 资源
  • Vue资源
  • 友情链接
GitHub
  • 前端

    • vscode插件同步
    • markdown语法
    • webpack笔记
      • 前言
      • 一些概念
    • web Worker使用笔记
    • vue-cli4设置打包相对路径
    • vue-cli4配置scss全局变量
    • TOAST UI Editor 使用方法
  • 博客搭建

  • 微前端

  • Cesium天地图

  • bug记录

  • vuepress

  • 浏览器架构及原理

  • photoshop

  • vue3+vite

  • react

  • 编程
  • 前端
Ni Ni
2021-01-28

webpack笔记

# 前言

webpack是一个 模块打包工具,支持所有的打包语法,比如 ES Module、CommonJS、CMD、AMD。初期的webpack是用来模块打包js的,发展到现在,已经可以打包很多种文件类型,比如 css、img 。

优化打包速度最有效的方法就是保持 nodejs 和 webpack 为最新版本。

# 一些概念

  1. tree-shaking 去除引用了,但没有使用的代码

  2. sideEffects 让webpack去除tree-shaking带来的副作用代码
    有一些代码,是在 import 时执行了一些行为,这些行为不一定和任何导出相关。例如 polyfill ,Polyfills 通常是在项目中全局引用, 而不是在 index.js 中使用导入的方式引用。
    Tree Shaking 并不能自动判断哪些脚本是副作用

  3. rollop.js Es Module打包器 parcel极速打包工具 webpack(目前前端3个主流框架)

  4. postcss-loader
    (1). 将css解析成可以操作的AST(抽象语法树)
    (2). 调用插件处理AST并得到结果

  5. webpack实现万物皆模块
    (1). 模块化
    (2). load 机制(资源加载) 处理资源下载
    (3). 插件机制(扩展webpack构建能力) 自动化构建任务

  6. clean-webpack-plgin 自动清理dist

  7. webpack工作流程
    (1). webpack cli 启动打包流程
    (2). 载入webpack核心模块,创建compiler对象
    (3). 使用compiler对象开始编译整个项目
    (4). 从入口文件开始,解析模块依赖,形成依赖关系树
    (5). 递归依赖树,将每个模块交给对应的loader处理
    (6). 合并loader处理完的结果,将打包结果输出到dist目录

  8. tree-shaking 特性在生产模式下自动开启

  9. babel/preset-env (预设插件集合) 将代码转换成ES modules 使用预设代码将ES modules 转换成commonjs

  10. splitting code 三种实现方式
    (1). 多入口打包(entry)




     
     







    module.exports = {
         mode: 'development',
         entry: {
           page1: './src/page1.js',
           page2: './src/page2.js'
         },
         output: {
           filename: '[name].bundle.js',
           path: path.resolve(__dirname, 'dist')
         }
       };
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

(2). 公共提取













 
 



module.exports = {pages: {
  	index: {
  		// page 的入口
  		entry: 'src/main.js',
  		// 模板来源就是在public里面创建的入口文件名
  		template: 'public/index.html',
  		// 编译后在 dist文件夹中的输出文件名,可选项,省略时默认与模块名一致
  		filename: 'index.html',
  		// 当使用 title 选项时,
  		// template 中的 title 标签需要时 <title><%= htmlWebpackPlugin.options.title %></title>
  		//title: 'index',
  		// 在这个页面中包含的块,默认情况下会包含
  		// 提取出来的通用 chunk 和 vendor chunk。
  		chunks: ['chunk-vendors', 'chunk-common', 'index']
  	}
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(3). 动态加载(动态导入)

function loadScript(url) {
  const script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}
1
2
3
4
5
编辑
#笔记
上次更新: 2021/07/22, 09:07:42
markdown语法
web Worker使用笔记

← markdown语法 web Worker使用笔记→

最近更新
01
react全家桶搭建全家桶模板
10-19
02
react学习到搭建一个全家桶的基础模板
10-09
03
202108自修图
09-24
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ni Ni | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×