我正在尝试使webpack和babel正常工作（我都是新手）。当我运行webpack-dev-server时，编译正常，但导入的模块中的内容无法正常工作。这是我配置项目的方式：
// package.json
{
"name": "wtf","version": "1.0.0","description": "","scripts": {
"dev": "webpack-dev-server --open","start": "webpack -d --watch","build": "webpack -p","test": "echo \"Error: no test specified\" && exit 1"
},"author": "","license": "ISC","devDependencies": {
"@babel/core": "^7.7.2","@babel/preset-env": "^7.7.1","babel-loader": "^8.0.6","webpack": "^4.41.2","webpack-cli": "^3.3.10","webpack-dev-server": "^3.9.0"
},"dependencies": {
"mithril": "^2.0.4"
}
}
// webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',entry: './src/index.js',output: {
filename: 'app.js',path: path.resolve(__dirname,'dist')
},devtool: 'inline-source-map',devserver: {
contentBase: './dist',hot: true
},module: {
rules: [
{
test: /\.js$/,exclude: /\/node_modules\//,use: { loader: 'babel-loader' }
}
]
}
}
// babel.rc
{
"presets": [
"@babel/preset-env"
],"sourceMaps": true
}
应用程序适中：
const m = require('mithril');
import welcome from './ui/welcome.js';
var wtf = (function() {
return {
view: function(vnode) {
return m("div",[
m("div",welcome)
]);
}
}
})();
m.mount(document.body,wtf);
和导入的welcome模块在这里：
const m = require('mithril');
var welcome = (function() {
return {
view: function(vnode) {
return m("div","welcome!");
}
}
})();
export default welcome;
当我运行npm run dev时，webpack-dev-server会编译代码而不会出现错误或警告，并在空白页上打开浏览器。探索代码，这就是我得到的：
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div>
<div view="function view(vnode) {
return m("div","welcome!");
}"></div>
</div>
</body>
</html>
无法理解为什么用这种方式解释模块，我想念什么？