webpack - 使用 Webpack 导入 JavaScript 文件

Question

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

假设我将此代码放在一个单独的文件中:

handlebarHelpers.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 教程，但没有比这更基础的了。

我尝试过:

app.js

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

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

这不起作用:

ReferenceError: handlebars is not defined

但是当我在 app.js 中有 Handlebars 辅助代码时，它就可以很好地工作。

要做什么？

Answer 1

在您的 webpack 配置中，您在不同的目录中引用 handlesbarsHelpers 和 app.js 。但在您的 app.js 示例中，您引用 handlesbarsHelpers ，就好像它位于与 app.js

相同的目录中

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

webpack.config.js

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

app.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!" );
});