# Webpack

Webpack

实现原理
构建和生命周期
横向对比
编译<开发环境>
打包<生产/测试环境>
Plugin
- 1. plugin的实现原理
- 2. 用过哪些常用plugin，解决什么问题
Loader

# 实现原理

# 1. webpack 原理

# 2. tree-shaking 的原理

# 3. 压缩、合并、打包实现的原理

# 构建和生命周期

# 1. 介绍下 Webpack 的整个生命周期

# 2. webpack 的构建流程

# 3. webpack 如何做异步加载

# 横向对比

# 1.css-loader 和 style-loader 的对比

# 2. webpack 与 gulp 的区别

# 3. cjs和esm在打包过程中的区别

# 4. webpack 的 loader 和 plugin 的对比

# 编译<开发环境>

# 1. webpack 怎么处理内联 css 的

# 2. dev-server 是怎么跑起来的

# 3. webpack 热更新的原理

# 4. 热更新的优化方式

# 5. 怎么配置开发环境的？

# 打包<生产/测试环境>

# 1. webpack的分包策略

# 2. webpack 怎么配置抽取公共文件

# 3.如何配置把 js、css、html 单独打包成一个文件

# 4. 如何实现分模块打包（多入口）

# 5. 如何优化包体积？

# 6. hash 码是怎么生成的？如何避免hash重复的情况？

# 7. 使用 import 时，node_modules 里的依赖会做什么

# 9. 多个活动页，如何实现单独打包指定个活动？

# 10. webpack一般怎么组织 CSS

# 11. 如何利用localstorage持久化缓存

# Plugin

# 1. plugin的实现原理

# 2. 用过哪些常用plugin，解决什么问题

# 1. terser-webpack-plugin

压缩JS文件，另外还有类似功能的webpack-parallel-uglify-plugin、uglifyjs-webpack-plugin js optimization: { minimizer: [ new TerserPlugin({ parallel: true, cache: true }) ] }

# 2. thread-loader

开启并行构建。由于happypack的作者说自己的兴趣已经不再js上了，所以已经没有维护了，并推荐使用的是webpack4.x+并且使用thread-loader。

{
   test: /\.js$/,
   use: [
     {
       loader: "thread-loader",
       options: threadLoaderOptions
     },
      "babel-loader",
    ],
   exclude: /node_modules/
}

1
2
3
4
5
6
7
8
9
10
11

# 3. DllPlugin

上面说的几个并行插件理论上是可以增加构建速度，网上很多文章都是这么说的，但是我在实际的过程中使用，发现有时候不仅没提升反而还降低了打包速度，网速查阅给的理由是可能你的电脑核数本来就低，或者当时你CPU运行已经很高了，再去开启多进程导致构建速度降低。

上面说的几个并行插件可能在某些情况下达不到你想要的效果，然而在我们团队优化webpack性能经验来看，这次所说的两个插件是很明显并且每次都能提高打包速度的。原理就是先把第三方依赖先打包一次生成一个js文件，然后真正打包项目代码时候，会根据映射文件直接从打包出来的js文件获取所需要的对象，而不用再去打包第三方文件。只不过这种情况打包配置稍微麻烦点，需要写一个webpack.dll.js。大致如下：

// webpack.dll.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        library: ["vue", "moment"]
    },

    output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, 'json-dll'),
        library: '[name]'
    },

    plugins: [
        new webpack.DllPlugin({
            path: './json-dll/library.json',
            name: '[name].json'
        })
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// webpack.dev.js
  new AddAssetHtmlWebpack({
     filepath: path.resolve(__dirname, './json-dll/library.dll.js')
  }),

 new webpack.DllReferencePlugin({
      manifest: require("./json-dll/library.json")
    })

1
2
3
4
5
6
7
8

# 4. webpack-bundle-analyzer

这个插件可以用可视化帮我们分析打包体积，从而来采用合适的优化方式去改进我们的webpack配置。

# 5. speed-measure-webpack-plugin

这个插件可以告诉我们打包时候每一个loader或者plugin花费了多少时间，从而对耗时比较长的plugin和loader做优化

# 6. friendly-errors-webpack-plugin

这个插件可以帮我们优化打包日志，我们打包时候经常看到很长一个日志信息，有的时候是不需要的，也不会去看所以可以用这个插件来简化。

# Loader

# 1. loader的原理

# 2. 用过哪些常用loader，解决什么问题

# 1. cache-loader

这个loader就是在第一次打包的时候会缓存打包的结果，在第二次打包的时候就会直接读取缓存的内容，从而提高打包效率。但是也需要合理利用，我们要记住一点你加的每一个loader，plugins都会带来额外的打包时间。这个额外时间比他带来的减少时间多，那么一味的增加这个loader就没意义，所以cache-loader最好用在耗时比较大的loader上，配置如下