运行webpack后其中一个dist目录输出JS文件始终为空问题求助

问题根因 #

你遇到的空输出是webpack默认的**死代码消除（Tree Shaking）**机制导致的：

• scripttwo.js里的代码有实际执行逻辑（document.body.appendChild(component())是顶层可执行代码，且内部依赖了lodash包，整段代码都有副作用，不会被webpack删除）
• scriptone.js里只定义了sayhello函数，既没有导出给其他模块使用，也没有在模块内部直接调用，webpack会判定这段代码是没有被用到的死代码，构建时直接剔除，最终输出的文件就为空。

解决方法 #

根据你的实际使用需求选择对应方案：

方案1：直接在scriptone内部调用函数 #

如果这个函数就是要在这个脚本加载时执行，直接加调用代码即可：

// 修改后的scriptone.js
function sayhello() {
  return 'hello again';
}
// 新增顶层调用，让webpack判定代码有实际作用
console.log(sayhello())

方案2：导出函数供其他模块使用 #

如果这个函数是要给其他脚本引入调用的，把函数导出即可：

// 修改后的scriptone.js
export function sayhello() {
  return 'hello again';
}

如果需要把函数挂载到全局对象给外部非模块化脚本使用，也可以加挂载逻辑：

function sayhello() {
  return 'hello again';
}
window.sayhello = sayhello;

方案3：临时关闭Tree Shaking（不推荐） #

如果需要保留所有定义的代码不管是否被使用，可以在webpack配置里关闭优化，但是会增大打包体积，仅调试用：

// 修改webpack.config.js
const path = require('path');

module.exports = {
    entry: {
      scriptone: './src/scriptone.js',
      scripttwo: './src/scripttwo.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    // 新增优化配置关闭摇树
    optimization: {
      usedExports: false,
      minimize: false
    }
};

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