在 Webpack 中需要保留部分 require 该怎么办

问题描述

问 题

我们在写前端的时候使用 Webpack 打包，然后因为项目需要使用了一个巨大的组件，这个组件内部是通过 require 来动态请求脚本的(不然一次性加载完得发疯)。其中有一部分使用 require 的脚本大概是这样的：

require([
    "something/module1",
    "something/module2"
], function(m1, m2) {
    ...
}

我们之前的前端脚本是通过 Webpack 打包成了单一文件，在引入这一段之后，这一段也被 Webpack 分析出来加载文件进行打包……

现在的需求是，希望 Webpack 能保留这部分 require(....) 语句，不把它模块化，也不翻译成 __webpack_require，这样在脚本发布后可以通过全局的 require 动态加载这些脚本——就这么个需求，找不到实现的方式，仔细研究了 IgnorePlugin 和 ContextReplacementPlugin 似乎都解决不了问题，不知道该怎么办了，求解……

解决方案

我自己想了个办法，把 require 改成了 _require，然后在 Webpack 里把 _require 定义成全局的 require，貌似解决了:

// 部分 webpack 配置
{
    ......,
    externals: {
        jquery: "jQuery",
        _require: "require"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            _require: "_require"
        })
    ],
    ......
}

代码里是这样的

_require([
    "something/module1",
    "something/module2"
], function(m1, m2) {
    ...
}

一开始本来想用 dojo.require 来代替的，发现 dojo.require 和 require 还不一样，dojo.require 貌似没有回调……

这篇关于在 Webpack 中需要保留部分 require 该怎么办的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！