从 webpack 中剥离动态需求

Question

我有一个类似这样的代码：

export default {
  something: true,
  mockData: process.env.USE_MOCK && require('./mocks/something.js').default
};

process.env.USE_MOCK 通过 webpack.DefinePlugin 设置为 true 或 false。我用它来启动我的应用程序 USE_MOCK=true npm run dev 或 npm run dev 到运行是否有模拟数据。

我希望 Webpack 通过 UglifyJS 的死代码消除在构建过程中删除这些动态需求，但我注意到它们保留在那里，因此 something.js 将在构建的包中。

在我的例子中，输出类似于：

module.exports = {
  something: true,
  mockData: (false) && __webpack_require__(181).default
};

有什么方法可以从包中完全删除该导入吗？

顺便说一句。我认为这样的方法可行：

let mockData;
if (process.env.USE_MOCK) {
  mockData = require('./mocks/something.js').default;
}
export default {
  something: true,
  mockData
};

虽然我更喜欢内联 require，因为我已经多次遇到这种模式。

Answer 1

尝试这样的事情：

export default {
  something: true,
  mockData: process.env.USE_MOCK ? require('./mocks/something.js').default : undefined 
};

或单独构建模块导出：

let module_export;
module_export.something = true;

if (process.env.USE_MOCK) {
  module_export.mockData = require('./mocks/something.js').default;
}

export module_export;

从 webpack 中剥离动态需求

Strip dynamic requires from webpack

javascript

node.js

uglifyjs

webpack