面试题：Webpack CLI 脚手架的中等用法相关问题

Question

在使用 Webpack CLI 脚手架搭建项目时，如何通过自定义配置文件来调整默认的打包输出路径和文件名？请详细说明步骤及相关配置项。

Answer 1

1. 创建自定义配置文件：
   • 通常在项目根目录下创建一个webpack.extra.js文件（文件名可自定义）。
2. 配置输出路径和文件名：
   • 在webpack.extra.js中编写如下代码：

const path = require('path');

module.exports = {
    output: {
        // 调整打包输出路径，__dirname表示当前目录，可根据需求修改
        path: path.resolve(__dirname, 'dist/newPath'),
        // 调整输出文件名
        filename: 'newFileName.js'
    }
};

3. 在Webpack CLI中使用自定义配置文件：
   • 在package.json的scripts中修改build命令（假设构建命令为build），如果原来的命令是"build": "webpack --config webpack.config.js"，则修改为"build": "webpack --config webpack.config.js --config webpack.extra.js"。这样就会在默认的webpack.config.js配置基础上，应用webpack.extra.js中的自定义配置，调整打包输出路径和文件名。

这里的path模块是Node.js内置模块，用于处理文件路径。resolve方法用于将相对路径解析为绝对路径。output.path指定输出目录，output.filename指定输出文件名。通过这种方式就完成了通过自定义配置文件调整默认打包输出路径和文件名。