在webpack中如何引入没有模块的js文件?

Question

比如，自己写的一个common.js文件，里面有很多工具函数。试过在entry入口里引入，但common.js里的方法还是提示未定义....

common.js里就是普通的工具函数定义，方便外部使用，没有模块定义....问，我想在webpack中全局使用这里的所有方法，该怎么引入这个没有模块的js文件？

Answer 1

npm i imports-loader

Answer 2

虽然有点答非所问，但还是建议楼主开始用ES6的模块语法，Webpack加个Babel的loader，好用到不想换……

Answer 3

不要做全局，你用web pack不就是为了模块化吗？像这种工具文件必须严格定义接口，使用的时候声明依赖。

Answer 4

没有模块，那就没必要使用webpack了，直接页面script加载到全局吧

Answer 5

common.js

// ...

module.exports = {
    getStyle   : getStyle,
    hasClass   : hasClass,
    addClass   : addClass,
    removeClass: removeClass
};

Answer 6

题主entry里添加common.js是没错的，如果要其中的所有方法都可全局使用，还需要这样做：

global.getStyle = getStyle;
global.hasClass = hasClass;
global.addClass = addClass;
// ...

这样相当于把所有定义的方法都引出到全局。

当然，仍然建议遵循commonJS的规范用module.exports来模块化组织代码。

Answer 7

entry这样写：

entry:{
    home:['a.js','b.js']
    common:['core.js','common.js']
}

common.js当作一个模块, 所有方法可以exports出去, 再在具体要用到common模块的页面

var common = require('path/to/common');
common.getStyle(obj,name);

webpack更重要的是模块化，而不是简单地打包压缩。

Answer 8

你好，我现在也遇到这个问题，请问你解决了吗