使用 Webpack 导入 JavaScript 文件

Question

我启动并运行了 Webpack，现在我想将我的代码拆分为单独的文件。

假设我在一个单独的文件中有这个代码：

车把助手.js

handlebars.registerHelper('timeFilter', function(context, block) {
  var f = block.hash.format || "MMM DD, YYYY HH:mm"; //default format
  return moment.unix(context).format(f);
});

然后我想通过 webpack 将它包含到我的主 app.js 文件中：

webpack.conf.js

const webpack = require('webpack');

module.exports = {
  entry: {
    app: [
      'handlebars',
      'handlebarHelpers.js'
      './js/app.js'
    ],
  },
  output: {
    filename: 'www/theme/js/app.dev.js'
  },
  node: {
    fs: 'empty'
  }
};

这有效，但我如何让它在我的 app.js 文件中执行它？我找到了无数的 webpack 教程，但没有比这更基本的了。

我试过：

应用程序.js

import handlebars from 'handlebars';
import './handlebarHelpers';

// yadaya create handlebars
$( document ).ready(function() {
    console.log( "ready!" );
});

这不起作用：

参考错误：车把未定义

但是当我在 app.js 中有把手帮助程序代码时，它运行良好。

该怎么办？

Answer 1

在你的WebPack配置你引用handlesbarsHelpers，并app.js在不同的目录。但是在您的app.js示例中，您所引用的内容handlesbarsHelpers就好像它在同一个目录 ass 中一样app.js

尝试将它们移动到同一个目录中。此外，app.js如果它正在导入您需要的所有其他内容，则您应该只需要在您的入口点：

webpack.config.js

entry: {
  app: './js/app.js'
},

应用程序.js

import handlebars from 'handlebars';
import './handlebarHelpers';  // make sure this is in same dir as app.js

// yadaya create handlebars
$( document ).ready(function() {
    console.log( "ready!" );
});