Я использую webpack с vuejs. Webpack делает свое дело, но когда я смотрю на полученный файл app.js, он дает мне эту ошибку.
"импорт" и "экспорт" могут отображаться только на верхнем уровне
Я предполагаю, что проблема связана с тем, что babel не конвертирует код? Потому что я получаю это в браузере при просмотре приложения.
Неожиданный импорт маркера
Здесь my entry.js для моего приложения vuejs:
/*jshint esversion: 6 */
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
require('./css/style.scss');
// Export the vue router
export var router = new VueRouter({
hashbang: false,
root: '/'
// history: true
});
// Set up routing and match routes to components
router.map({
'/': {
component: require('./components/home/Home.vue')
}
});
// Redirect to the home route if any routes are unmatched
router.redirect({
'*': '/'
});
// Start the app on the #app div
router.start(App, '#app');
Вот мой webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: './src/entry.js',
output: {
filename: './public/js/app.js'
},
devtool: 'source-map',
plugins: [
new ExtractTextPlugin('./public/css/style.css')
],
module: {
preLoaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'jshint-loader'
}],
loaders: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style',
'css!sass'
),
},
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
exclude: /node_modules/,
include: [
path.resolve(__dirname, "src/services"),
],
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
};
Вот мой файл package.json:
{
"name": "test-webpack",
"version": "1.0.0",
"description": "Myapp",
"main": "entry.js",
"scripts": {
"watch": "webpack-dev-server --host $IP --port $PORT --hot --inline --config webpack.config.js",
"dev": "webpack",
"build": ""
},
"author": "Dev",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-runtime": "^6.9.2",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"jshint": "^2.9.2",
"jshint-loader": "^0.8.3",
"node-sass": "^3.8.0",
"path": "^0.12.7",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.2",
"vue-loader": "^8.5.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"vue": "^1.0.25",
"vue-router": "^0.7.13"
}
}