Webpack - モジュールが存在してもモジュールが見つかりません

Question

This is a branch off of my previous question and applied suggestions。しかし、私はまだ大きな問題を抱えています。

私のバーベルトランスバーターは、.babelrcファイルとともに準備されました。私のモジュールをインポートする私のインポートコードは次のようになります。

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"] 
} 

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

は、しかし、私はこれを取得しています

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(); 

UPDATE：私は私の設定に決意を追加する必要が推奨されているように。それは次のようになります。

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の設定のAND一気のエントリポイントを指定しています。 Webpack設定のentryプロパティを削除します。

これを2回指定すると、gulp configは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設定です。

これ以上の質問がある場合、これが動作している場合はお知らせください。

EDITあなたの設定のルートレベルに直接

resolve：

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