Question

我最近开始使用Webpack并遇到了这个问题。我有一个＆copyright; copyright.js＆＃39;我将函数导出为模块的文件。在＆＃39; index.js＆＃39;文件我需要＆copyright©js＆＃39;。在我的＆＃39; webpack.config.js＆＃39;我输出了一个app.bundle.js＆＃39;文件，我可以看到＆＃39; getCopyright（）＆＃39;构建后的功能。

如何调用html脚本标记中的函数以便我可以返回值？到目前为止，我已经找不到变量getCopyright＆＃39;或当我打电话给copyright.getCopyright（）;＆＃39;我发现“无法找到变量版权”。

谢谢。

copyright.js

module.exports.getCopyright = function(){
  var val = document.write(new Date().getFullYear());
  return val;
}

webpackconfig.js

module.exports = {
    entry: {
        app: './src/index.js',
        filename1: './src/filename1.js',
        filename2: './src/filename2.css'
    },
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: '[name].bundle.js'
    },

index.js

var copyright = require('./copyright');

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="app.bundle.js"></script>
</head>
  <body>
    <div class="foot">
      <script>getCopyright();</script>
    </div>
  </body>
</html>

Answer 1

webpack中的所有内容都是一个模块。即使您的非模块化代码也会打包到模块中。 var copyright（index.js）不在全局范围内，因此当您运行脚本标记时，无法访问版权。

你当然可以这样做：

window.copyright = require('./copyright');

然后我们直接回到使用全局对象。（当然，如果你正在编写一些其他人应该包含的网络库，那么你迟早要向浏览器公开一些东西。）

使用webpack，如果你绝对想要的话，可以在html中内联脚本，但是好的解决方案是从模块运行你的东西而不是脚本标签（使用全局环境）。

所以从index.js运行你的代码（这就是你之所以宣称它是一个入口点的原因）：

let copyright = require('./copyright');
copyright.getCopyright();

（是的，这确实使document.write（）有点适得其反。）

在webpack中的module.exports之后无法找到变量

1 个答案: