Webpack - 儘管模塊存在，但找不到模塊

Question

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 

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

可悲的是我仍然得到：

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./app/js/script.js in /projects/project-root

難道我的文件結構需要改變嗎？

Answer 1

你指定你的WebPack Config中和大口的入口點。在您的webpack配置中刪除entry屬性。

如果指定了兩次，gulp配置會告訴webpack獲取中的文件，然後是webpack中的，這將導致像./app/js/app/js/script.js這樣的路徑。

如果您修復了我們，請繼續發帖。 =）

Answer 2

鑑於您的腳本位於，並且請求的模塊有./app/js/modules/toc，您需要相對於腳本調用它=>./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'] 
    } 
    // ... 
};