1.Uncaught SyntaxError: Unexpected token import
查看打包后的文件,发现文件并没有被编译
import 是ES6的写法,需要转换为ES5之后才能被浏览器识别,需要在webpack配置文件中增加配置
{
test: /\.js$/,
loader: 'babel?presets=es2015',
include: SourcePath,
},
如果这么配置之后还是出现同样的错误,应该添加.babelrc配置文件,在该配置文件中添加配置如下
{
"presets": [
"es2015",
"stage-2"
],
"comments": false
}
2.
ERROR in ./src/modules/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./App in /Users/moweng/exercise/vue2.0/src/modules/app
@ ./src/modules/app/index.js 7:11-27
这个错误是指没有找到‘./App’ 模块,但是检查之后发现是有这个 文件,其实是webpack试图去加载模块的时候,它默认是查找以 .js 结尾的文件的,它并不知道 .vue 结尾的文件是什么,所以我们要在配置文件中告诉webpack,遇到 .vue 结尾的也要去加载,添加 resolve 配置项
resolve: {
extensions: ['', '.js', '.vue']
},
3.UncaughtReferenceError: webpackJsonp is not defined
这个是因为打包的时候用了CommonsChunkPlugin插件生成了公共文件,但是并没有引用
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'app-common.js',
});
在html页面引入生成的公共文件
<body>
<%- body %>
<script src="/statics/app-common.js"></script>
<script src='/statics/index.js'></script>
<!-- built files will be auto injected -->
</body>