webpack 0-1 配置 以及 (性能优化)

五大核心：

模式 production development
mode: 'development',

入口
entry: './src/js/index.js',

loader的配置
module: {},

plugins的配置
plugins: [],

输出
output: {},

开发环境:

loader的配置

处理css

处理less

处理图片

处理其他资源

plugins的配置

开发服务器

生产环境：

主要是对html、js、css、img压缩 以及兼容性的处理

css 、less 的兼容性处理，提取js中的css成单独文件，loader简单封装

js的语法检查以及兼容性处理

图片的压缩以及其他资源的打包

html、css的压缩 js在生产环境下会自动压缩

webpack的优化

# webpack性能优化
* 开发环境性能优化
* 生产环境性能优化

## 开发环境性能优化
* 优化打包构建速度
   * HMR

* 优化代码调试
   * source-map

## 生产环境性能优化
* 优化打包构建速度
   * oneOf
   * babel 缓存
   * 多进程
   * externals
   * dll
* 优化代码运行的性能
   * 缓存（hash-chunkhash-contenthash）
   * tree shaking 树摇 去除无用代码 前提es6
   * code split 代码分割
   * 懒加载、预加载
   * pwa

开发环境-优化

HMR

开发模式的代码调试优化   devtool: 'eval-soure-map'

生产环境-优化

oneOf 优化生产环境打包速度

babel缓存、文件资源缓存

由于资源在强制缓存期间不会访问服务器，未更新，所以给资源名称做处理 加hash值

tree shaking：树摇 为了去除无用代码，只打包使用代码

代码分割，将文件分成多个文件，按需加载，主要是js代码

1.通过多入口来拆分文件，不太灵活

2. optimization

比如 多个文件中 都引入 jquery 库

3. 通过js来让某个文件被单独打包成一个chunk

默认根据id来命名，比如0.js；  可以通过注释来修改chunk名称

/* webpackChunkName: 'test' */

js文件的 懒加载、预加载

比如：两个文件被引入，会一起加载

// 懒加载：当文件需要使用时才加
     // 预加载 prefetch：会在是用之前，提前加载js文件

PWA

渐进式网络开发应用程序（离线可访问技术）

谷歌开源插件 workbox --> workbox-webpack-plugin

需要在入口文件中注册serviceWorker / 处理兼容性问题

1. 编译会报错

2. serviceWorker代码必须运行在服务器上

注册成功

多进程

建议：js代码多的情况下使用，js少的话反而起可能起到反作用 ，勿滥用

externals 忽略打包第三方文件

dll 动态连接库

使用dll技术，对某些库（第三方库：jquery/react/vue）进行单独打包

需要单独创建文件

通过dll 将jquey打包好以后 以后可直接引用即可