I am currently in the process of setting up my very first ES6 and webpack "application" where I aim to utilize classes and modules. However, each time I attempt to transpile the application using the webpack command, I encounter the following error:
$ webpack
Hash: c91db5651ec9123b8959
Version: webpack 3.5.6
Time: 2319ms
Asset Size Chunks Chunk Names
app.bundle.js 354 kB 0 [emitted] [big] main
index.html 978 bytes [emitted]
[0] ./src/app.js 14 kB {0} [built]
+ 1 hidden module
ERROR in ./src/app.js
Module not found: Error: Can't resolve 'radar' in 'C:\dev\git\my-first-app\src'
@ ./src/app.js 7:13-29
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.37 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module
I have the following files available:
package.json
{
"name": "my-first-app",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"build": "./node_modules/.bin/babel src -d dest",
"start": "webpack-dev-server"
}
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"webpack": "^3.5.6"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"d3": "3.5.17",
"html-webpack-plugin": "^2.28.0",
"webpack-dev-server": "^2.4.5"
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dest'),
filename: 'app.bundle.js'
},
module: {
loaders: [
{
loader: 'babel-loader',
include: [
path.resolve(__dirname, "src")
],
test: /\.js$/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
filename: 'index.html',
inject: 'body'
})
]
};
src/app.js
'use strict';
import * as d3 from 'd3';
import radar from 'radar';
var r = new radar();
r.render();
radar.js
'use strict';
import * as d3 from 'd3';
export default class radar {
render() { ... }
}
The index.html file is a simple HTML document with basic head and body tags.
I suspect that the error may lie within the webpack.config.js file or perhaps due to mixing different techniques for utilizing ES6. The npm build command also does not seem to help (it appears that nothing occurs). Could someone please provide assistance? I am feeling quite perplexed and unsure of what to investigate...