Webpack -模块即使存在，也找不到。

Question

This is a branch off of my previous question and applied suggestions。但我仍然有重大问题。

我现在有了我的babel转拼器，以及一个.babelrc文件。导入模块的导入代码如下所示：

var init = require('./app/js/modules/toc');
init();

不过，我明白了：

ERROR in ./app/js/script.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./app/js/modules/toc in /projects/project-root/app/js
 @ ./app/js/script.js 1:11-42

Webpack配置：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./app/js/script.js",
  module: {
  rules: [{
      test: /\.js$/,
      use: 'babel-loader'
    }]
  },
  output: {
    path: __dirname + "public/javascripts",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

.babelrc

{
  "presets": ["es2015"]
}

格尔普斯任务

//scripts task, also "Uglifies" JS
gulp.task('scripts', function() {
    gulp.src('app/js/script.js')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('public/javascripts'))
    .pipe(livereload());
});

我完全是lost...what，我做错了吗？

对于我的导入代码，我也尝试过：

import {toc} from './modules/toc'
toc();

更新:按照建议，我需要向我的配置添加决心。现在看起来是这样的：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./app/js/script.js",
  resolve: {
    extensions: ['.js']
  },
  module: {
  rules: [{
      test: /\.js$/,
      use: 'babel-loader'
    }]
  },
  output: {
    path: __dirname + "public/javascripts",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

遗憾的是我还是明白：

未找到输入模块中的错误:错误:无法解析/project/project/project-root中的“文件”或“目录”./app/js/script.js

我的文件结构需要改变吗？

Answer 1

您将在webpack配置和gulp中指定一个入口点。删除webpack配置中的entry属性。

如果您指定了两次，gulp配置将告诉webpack在./app/js/script.js中获取文件，然后在./app/js/script.js中获得webpack，这将导致像./app/js/app/js/script.js这样的路径。

如果你修好了随时通知我们。=)

Answer 2

每当您导入/要求模块而不指定文件扩展名时，您需要告诉webpack如何解决它。这是由webpack配置中的resolve部分完成的。

resolve: {
  extensions: ['.js'] // add your other extensions here
}

经验法则是:每当webpack抱怨没有解析一个模块时，答案很可能是resolve配置。

让我知道任何进一步的问题，如果这是可行的。

编辑

resolve直接指向配置的根级：

// webpack.config.js
module.export = {
  entry: '...',
  // ...
  resolve: {
    extensions: ['.js']
  }
  // ...
};

Answer 3

考虑到您的脚本位于./app/js/script.js，并且请求的模块位于./app/js/modules/toc，您需要相对于您的脚本=> ./modules/toc来调用它。

这是因为您的脚本和模块都位于js文件夹中。