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

c3frrgcw 于 2022-12-16 发布在 Gulp

关注(0)|答案(3)|浏览(313)

This is a branch off of my previous question and applied suggestions.但是我仍然有主要的问题。
现在我已经有了Babel transpiler沿着一个.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

网络包配置：

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 }),
  ],
};

巴伯尔

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

我完全迷失了...我做错了什么？
对于我的导入代码，我还尝试：

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 }),
  ],
};

可惜我还是得到：
找不到输入模块中的错误：错误：无法解析“文件”或“目录”。/projects/project-root中的/app/js/script. js
我的文件结构是否需要更改？

gulp

来源：https://stackoverflow.com/questions/46850288/webpack-module-not-found-even-though-module-exists

3条答案

按热度按时间

i1icjdpr1#

每当你导入/需要一个模块而没有指定文件扩展名时，你需要告诉webpack如何解析它，这是由webpack配置中的resolve部分完成的。

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

作为一个经验法则：每当webpack抱怨无法解析模块时，答案可能就在resolve配置中。
如果有任何问题，请告诉我，如果这工作。

编辑

resolve直接添加到配置的根级别：

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

赞(0）回复(0）举报 2022-12-16

w3nuxt5m2#

您正在webpack配置中指定入口点，请删除webpack配置中的entry属性。
如果指定两次，gulp配置将告诉webpack获取./app/js/script.js中的文件，然后webpack获取./app/js/script.js中的文件，这将产生类似./app/js/app/js/script.js的路径。
如果你修复了它，让我们知道。=）

赞(0）回复(0）举报 2022-12-16

vh0rcniy3#

假设您的脚本位于./app/js/script.js，并且请求的模块也在./app/js/modules/toc中，那么您需要相对于您的script =〉./modules/toc来调用它。
这是因为脚本和模块都位于js文件夹中。

赞(0）回复(0）举报 2022-12-16