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：未定义把手

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

怎么办？

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

使用Webpack导入JavaScript文件

1 个答案: