Question

this。但我仍然遇到重大问题。

我现在有我的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"]
}

Gulptask

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

可悲的是，我仍然得到：

找不到Entry模块中的错误：错误：无法解析'file'或 / projects / project-root中的'directory'./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

鉴于您的脚本位于./app/js/script.js且请求的模块位于./app/js/modules/toc，您需要相对于您的脚本调用它=＆gt; ./modules/toc应该有用。

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

Answer 3

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

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

根据经验：每当webpack抱怨不解析模块时，答案可能在于resolve配置。

让我知道任何进一步的问题以及是否有效。

修改

resolve直接指向配置的根级别：

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

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

3 个答案: