如何⽤webpack来优化前端性能？

webpack是一个现代化的前端打包工具，它可以将多个模块打包成一个或多个静态资源文件。
通过配置文件，你可以定义入口文件和出口文件，以及一系列的加载器(loader)和插件(plugins)来处理不同类型的文件。

以下是一个简单的webpack配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 出口文件
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 使用loader处理以.js结尾的文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader' // 使用babel-loader进行转译
        }
      },
      {
        test: /\.css$/, // 使用loader处理以.css结尾的文件
        use: ['style-loader', 'css-loader'] // 先使用css-loader解析css文件，再使用style-loader将样式插入到页面中
      }
    ]
  },
  plugins: [
    // 插件配置
  ]
};

通过运行webpack命令，webpack会根据配置文件进行打包处理，生成最终的静态资源文件。
webpack的主要功能包括模块化管理、代码分割、文件压缩、静态资源优化等。

⽤webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。


压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack

的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件， 利⽤ cssnano （css-loader?minimize）
来压缩css


利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对
于 output 参数和各loader的 publicPath 参数来修改资源路径


Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 
--optimize-minimize 来实现


Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存


提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,
利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

有哪些常⻅的Loader？


file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件
url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去
source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试
image-loader：加载并且压缩图⽚⽂件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性
style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码

有哪些常⻅的Plugin？

define-plugin：定义环境变量
html-webpack-plugin：简化html⽂件创建
uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
webpack-parallel-uglify-plugin: 多核压缩,提⾼压缩速度
webpack-bundle-analyzer: 可视化webpack输出⽂件的体积
mini-css-extract-plugin: CSS提取到单独的⽂件中,⽀持按需加载

分别介绍bundle，chunk，module是什么


bundle：是由webpack打包出来的⽂件
chunk：代码块，⼀个chunk由多个模块组合⽽成，⽤于代码的合并和分割
module：是开发中的单个模块，在webpack的世界，⼀切皆模块，⼀个模块对应⼀个⽂件，webpack会从配置的
entry中递归开始找出所有依赖的模块

Loader和Plugin的不同？

不同的作⽤:
Loader直译为"加载器"。Webpack将⼀切⽂件视为模块，但是webpack原⽣是只能解析js⽂件，
如果想将其他⽂件也打包的话，就会⽤到 loader 。 所以Loader的作⽤是让webpack拥有了加载和
解析⾮JavaScript⽂件的能⼒。


Plugin直译为"插件"。Plugin可以扩展webpack的功能，
让webpack具有更多的灵活性。 在 Webpack 运⾏的⽣命
周期中会⼴播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 
提供的 API 改变输出结果。



webpack⾯试题

不同的⽤法:
Loader在 module.rules 中配置，也就是说他作为模块的解析规则⽽存在。 类型为数组，每⼀项都是⼀
个 Object ，⾥⾯描述了对于什么类型的⽂件（ test ），使⽤什么加载( loader )和
使⽤的参数（ options ）



Plugin在 plugins 中单独配置。 类型为数组，每⼀项是⼀个 plugin 的实例，参数都通过构造函数传⼊。

如何提⾼webpack的构建速度？

1. 多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码
2. 通过 externals 配置来提取常⽤库
3. 利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 
4. 来对那些我们引⽤但是绝对不会修改的npm
包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。

5. 使⽤ Happypack 实现多线程加速编译
6. 
7. 使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
8. 使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码