Webpack - 尽管模块存在,但找不到模块
This is a branch off of my previous question and applied suggestions。但我仍然有重大问题。Webpack - 尽管模块存在,但找不到模块
我现在有我的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
难道我的文件结构需要改变吗?
你指定你的WebPack Config中和大口的入口点。在您的webpack配置中删除entry
属性。
如果指定了两次,gulp配置会告诉webpack获取中的文件,然后是webpack中的,这将导致像./app/js/app/js/script.js
这样的路径。
如果您修复了我们,请继续发帖。 =)
鉴于您的脚本位于,并且请求的模块有./app/js/modules/toc
,您需要相对于脚本调用它=>./modules/toc
应该可以工作。
这是因为您的脚本和模块都位于js
文件夹中。
我试过了,我仍然得到一个解决错误...是我的语法不正确?我也尝试从'./modules/toc' toc();'0122}进入{toc};' – kawnah
每当您输入/需要一个模块而没有指定文件扩展名时,您需要告诉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变得完全荒谬。我会让你知道它是怎么回事! :) – kawnah