前言

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')
         }
       };
    

(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']
  	}
  }

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

function loadScript(url) {
  const script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}