这是我之前的问题的一个分支,并应用了建议。但我仍然遇到了很大的问题。
现在我已经安装好了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();
更新:根据推荐,我需要在我的配置中添加resolve。现在看起来像这样:
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 }),
],
};
很遗憾,我仍然遇到了这个问题:
错误:无法解析“文件”或“目录”./app/js/script.js,位于/projects/project-root。入口模块未找到的错误
我的文件结构需要更改吗?