vue2.0+webpack踩过的坑_uncaught syntaxerror: unexpected token import-CSDN博客

本文链接：https://blog.csdn.net/qq_17472727/article/details/72778352

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
}

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>