极客观点
项目管理
HarmonyOS
我用Vue,webpack,vue-loader想做一个简单的demo但是run dev时却发生错误
下面这是部分代码
webpack.config.js代码
`module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'bundle.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'},
{test:/\.js$/, loader:'babel', exclude:/node_modules/}
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}};`
package.json:`{
"name": "Vue",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot"},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^6.23.0",
"css-loader": "^0.28.4",
"vue": "^2.0.0",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.4",
"vue-loader": "^8.7.0",
"vue-style-loader": "^3.0.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"},
"dependencies": {}
}index.html:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title></head>
<body>
<app></app>
<script src="build.js"></script></body>
</html>`
mamin.js`/**
Created by unicom on 2017/6/29.
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'body',
components:{
app:App
}});
`
App.vue:`<template>
<h2>welcome Vue</h2></template>
<script>
</script>
<style>
</style>`
报错代码:`
D:webstromVue>npm run dev
Vue@1.0.0 dev D:webstromVue
webpack-dev-server --inline --hot
Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
configuration has an unknown property 'babel'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?,
entry, externals?, loader?, module?, name?, node?, output?, performance?, plugin
s?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, res
olveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configura
tion.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass theseoptions to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
babel: ...
}
})
]npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Vue@1.0.0 dev: webpack-dev-server --inline --hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Vue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersunicomAppDataRoamingnpm-cache_logs2017-07-06T09_33_18
_353Z-debug.log
D:webstromVue>`
格式太乱了 随便看了两眼
webpack2.0已经不允许 不加
-loader，补全vue-loader和babel-loader先2.
babel的配置写错地方了吧（ps：我没见过这种写法，改天我试一下吧）