Webpack默认配置咨询：默认加载器、配置内容及适用性判断

1. 未提供配置文件时，webpack默认包含哪些loader？ #

其实严格来说，webpack默认没有额外安装的第三方loader，它本身内置了处理JavaScript和JSON文件的原生能力：

• 对于JavaScript文件，webpack可以直接解析ES模块、CommonJS等模块化语法，但不会自动做ES6+到ES5的转译（比如箭头函数、let/const这类语法不会被转成兼容旧浏览器的代码）。
• 对于JSON文件，webpack内置了类似json-loader的解析逻辑，不需要单独安装就能直接导入JSON文件并使用。

如果你的项目需要处理CSS、图片、Sass/Less预处理器、TypeScript等资源，默认是没有对应loader支持的，必须手动安装并配置。

2. webpack的默认配置具体内容是什么？ #

webpack的默认配置可以近似看成下面这样（以webpack 5为例），你可以通过webpack --config参数指定自定义配置来覆盖它：

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true // webpack 5默认开启，打包前自动清空dist目录
  },
  // 默认模式为生产模式，自动开启代码压缩、tree-shaking等优化
  mode: 'production',
  // 模块解析规则
  module: {
    rules: [
      // 处理JavaScript文件（仅webpack原生解析，无额外loader）
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: []
      },
      // 处理JSON文件（内置解析逻辑）
      {
        test: /\.json$/,
        type: 'json'
      }
    ]
  },
  // 文件扩展名自动补全规则
  resolve: {
    extensions: ['.js', '.json', '.wasm']
  },
  // 生产模式下的默认优化配置
  optimization: {
    minimize: true, // 开启代码压缩
    usedExports: true // 开启tree-shaking，移除未使用的代码
  }
};

3. 文档说明无需配置，但如何判断默认配置是否满足需求？ #

可以从实际项目需求出发，结合打包测试来判断：

• 满足需求的场景：你的项目只使用JavaScript和JSON文件，不需要兼容旧版本浏览器（比如只针对现代浏览器开发），不需要处理CSS、图片、字体等静态资源，也不需要自定义输出路径/文件名、代码分割等高级功能。这种情况下直接用默认配置打包就能正常工作。
• 不满足需求的场景：如果出现以下任意一种情况，默认配置就不够用了：
  • 需要转译ES6+语法到ES5以兼容旧浏览器
  • 需要导入CSS、Sass/Less、图片、字体等资源
  • 需要使用TypeScript、JSX等语法
  • 需要自定义输出文件的名称、路径，或者多入口打包
  • 需要开启devServer进行本地开发调试
  • 需要添加环境变量、代码分割、缓存策略等高级配置

另外一个简单的验证方法：直接用默认配置尝试打包你的项目，如果打包成功且运行无问题，那说明默认配置能满足；如果打包报错（比如引入CSS时提示模块无法解析），或者运行时出现语法兼容问题，就说明需要自定义配置了。

内容的提问来源于stack exchange，提问作者Konrad