webpack的Error记录

文章目录

1. package.json空白

参考
输入webpack后无法打包:

ERROR in Entry module not found: SyntaxError:
\webpack_try\package.json (directory description file): SyntaxError: Unexpected end of JSON input

在子目录下添加空白的json配置文件是会出现报错，其原因是因为文件内容空白

2. package.json报错

参考
报错内容

Problems loading reference 'https://json.schemastore.org/package': 
Unable to load schema from 'https://json.schemastore.org/package': 
Request vscode/content failed unexpectedly without providing any details.

原因
因为某些原因无法连接到 Schema
解决方式:
设置离线模式方法：在 User settings.json 中添加
“json.schemaDownload.enable”: false

3.webpack.config.js手动配置无效

报错:

No configuration file found and no output filename configured via Cli option

参考
把webpack.config.js放到项目的根目录文件上，就可以解决了

4. vue构建版本错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available

[参考] (https://www.pianshen.com/article/4406262022/)

runtime-only: 代码中不可以有任何的template, 一个vue实例也被看成一个template; 这版本不包含编译代码
runtime-compiler: 有compiler可以编译template

原因是因为:

import vue from 'vue'

这个语句默认从 dist/vue.common.js里引入的vue, 而不是vue.js; 所以需要对webpack.config.js进行处理, 利用webpack 的别名功能把 vue/dist/vue.js 命名成 vue:

module.exports = {
    
    
    // 省略...
    resolve: {
    
    
        alias: {
    
    
            'vue': 'vue/dist/vue.js'
        }
    },
    ...

为什么 vue 默认导出的是 vue.common.js，它和 vue.js 的区别在哪里，又有什么关系？

Vue 最早会打包生成三个文件，一个是 runtime only 的文件 vue.common.js，一个是 compiler only
的文件 compiler.js，一个是 runtime + compiler 的文件 vue.js。

也就是说，vue.js = vue.common.js + compiler.js，而如果要使用 template 这个属性的话就一定要用 compiler.js，那么，引入 vue.js 是最恰当的。

5. VUE-LOADER报错

ERROR in ./src/vue/App.vue
You may need an appropriate loader to handle this file type.

先检查loader下载没, 比如解析.vue文件如下

npm install vue-loader vue-template-compiler --save-dev

下载后还是报错,接着检查webpack.config.里是否给定了规则,

module: {
    
    
    rules: [{
    
    
      test: /\.vue$/, //匹配.vue文件
      use: ['vue-loader']
    }]
  },

给定后还是报错:

ERROR in ./src/vue/App.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.de VueLoaderPlugin in your webpack config.

目前解决方法:
高版本vue导入时需要去掉.vue后缀:

```javascript
import App from './vue/App'

看别人也有通过以下方法解决的:

在package.json里检查vue-loader版本:

```javascript
"vue-loader": "^15.9.7",

vue-template-compiler版本和vue版本要一致, 把这里vue-loader版本改到13.0.0, 然后重新:

npm install

安装依赖.

6. webpack打包css不报错,但无法打包:

参考

UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function

解决方法:
css-loader和style-loader版本过高
降低版本重新install即可

"devDependencies": {
    
    
    "css-loader": "^3.3.0",
    "prettier": "^1.12.1",
    "style-loader": "^1.0.0",
    "vue-loader": "^14.2.4",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^3.6.0"
  },

以下网站可以查看css-loader 和 style-loader的版本信息
https://www.npmjs.com/package/style-loader
https://www.npmjs.com/package/css-loader