面试题：Webpack入口动态加载及出口文件的CDN部署配置

Question

项目中要求实现Webpack入口的动态加载，以按需加载模块，减少初始加载时间。同时，输出的文件需要部署到CDN上，并且要保证HTML文件中引用的资源路径正确指向CDN。阐述你实现这两个需求的思路，并给出关键的Webpack配置代码及相关工具（如html - webpack - plugin等）的配置要点。

Answer 1

实现思路

1. 动态加载模块：使用Webpack的import()语法实现动态导入，Webpack会将这些动态导入的模块进行代码分割，实现按需加载，减少初始加载时间。
2. 部署到CDN及正确引用路径：通过配置output.publicPath指定CDN地址，确保输出的文件在CDN上能正确访问。使用html-webpack-plugin来自动生成HTML文件，并在其中正确引用CDN上的资源。

关键Webpack配置代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口文件可以根据动态导入来按需加载模块
  entry: './src/index.js', 
  output: {
    // CDN地址
    publicPath: 'https://your-cdn-url.com/', 
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  module: {
    rules: [
      // 配置各种loader，如babel-loader处理ES6+语法等
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 确保HTML中资源引用CDN路径
      publicPath: 'https://your-cdn-url.com/' 
    })
  ]
};

html - webpack - plugin配置要点

1. template：指定HTML模板文件路径，Webpack会基于此模板生成最终的HTML文件。
2. publicPath：设置HTML文件中资源引用的基础路径，这里设置为CDN地址，确保HTML文件中引用的脚本、样式等资源路径正确指向CDN。