前端面试练习24.3.5

webpack相关

项目使用webpack流程

1. 进入一个初始化好的vue项目
2. 下载安装webpack相关依赖包/插件
   1. npm install --save-dev webpack webpack-cli webpack-dev-server
   2. 安装一些相关的loader,比如vue-loader，babel-loader，css-loader等
3. 创建webpack.config.js文件，进行相关配置
4. 文件内容如下

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development', // 设置为开发模式
  entry: './src/main.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js', // 输出文件名
    publicPath: '/dist/' // 公共路径
  },
  module: {
    rules: [
      {
        test: /\.vue$/, // 处理.vue文件
        loader: 'vue-loader'
      },
      {
        test: /\.js$/, // 处理.js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/, // 处理.css文件
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif)$/i, // 处理图片文件
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images' // 输出目录
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'], // 解析文件扩展名
    alias: {
      'vue$': 'vue/dist/vue.esm.js', // 指定Vue版本
      '@': path.resolve(__dirname, 'src') // 设置@符号指向src目录
    }
  },
  plugins: [
    new VueLoaderPlugin() // Vue Loader插件
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'public'), // 设置服务器根目录
    publicPath: '/dist/', // 公共路径
    port: 8080, // 端口号
    open: true // 自动打开浏览器
  }
};

1.webpack的构建流程

1. 初始化参数：从配置⽂件和 Shell 语句中读取与合并参数，得出最终的参数；
2. 开始编译：⽤上⼀步得到的参数初始化 Compiler 对象，加载所有配置的插件，执⾏对象的 run ⽅法开始执⾏编译；
3. 确定⼊⼝：根据配置中的 entry 找出所有的⼊⼝⽂件；
4. 编译模块：从⼊⼝⽂件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找出该模块依赖的模块，再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理；
5. 完成模块编译：在经过第4步使⽤ Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据⼊⼝和模块之间的依赖关系，组装成⼀个个包含多个模块的 Chunk，再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表，这步是可以修改输出内容的最后机会；
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和⽂件名，把⽂件内容写⼊到⽂件系统。

2.webpack的优势

webpack适⽤于⼤型复杂的前端站点构建:

webpack有强⼤的loader和插件⽣态,打包后的⽂件实际上就是⼀个⽴即执⾏函数，这个⽴即执⾏函数接收⼀个参数，这个参数是模块对象，键为各个模块的路径，值为模块内容。⽴即执⾏函数内部则处理模块之间的引⽤，执⾏模块等,这种情况更适合⽂件依赖复杂的应⽤开发。

3.webpack的热更新是怎么做的

Webpack的热更新（Hot Module Replacement，HMR）是一项功能，它允许在不刷新整个页面的情况下替换、添加或删除模块。这使得开发者可以在保持应用程序状态的同时进行快速的开发和调试。

1. 运行时更新模块：

   • 当Webpack监听到源代码发生变化时，它会在后台重新编译修改过的模块，但并不会重新加载整个页面。
   • 更新的模块以及其依赖项会被标记为"热"（hot）。

2. 模块热替换（Hot Module Replacement）：

   • 当新的模块编译完成后，Webpack会使用WebSocket或者XHR等方式通知在运行时的应用程序。
   • 应用程序会接收到这些更新，并通过一种叫做"热更新中间件"的工具来处理这些更新。

3. 应用程序响应更新：

   • 应用程序会根据更新的类型（替换、添加或删除模块）来执行相应的操作。
   • 替换模块时，应用程序会尽可能保留当前模块的状态，例如组件的状态或者页面的滚动位置。
   • 如果一个模块无法热更新，那么整个页面就会被重新加载。

4. 完成热更新：

   • 一旦应用程序完成更新，它会发送一个消息给Webpack，告诉Webpack热更新已经完成。
   • 在完成更新之后，Webpack会重新编译其他模块，以确保它们与最新的代码保持同步。

4.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插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

5.webpack treeShaking机制的原理

• treeShaking也叫摇树优化，是一种通过移除多于代码，来优化打包体积的，生产环境默认开启。
• 可以在代码不运行的状态下，分析出不需要的代码；
• 利用es6模块的规范
  • ES6 Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块
  • 静态分析程序流，判断那些模块和变量未被使用或者引用，进而删除对应代码

6.一些常见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 代码