webpcak4.0 的踩坑记

刚入门webpack就接触4.0，才发现很多和前版本很多出入，也因此踩了很多坑，现在把遇到的坑都慢慢填上

• 首先在babel这里

  1. 要保证版本一致，低版本就都是低版本，高版本就都是高版本
     详解webpack配置babel
     高版本配置

  以下是针对低版本的做法：
  下载的包：
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-stage-0": "^6.24.1",
  
  webpack.config.js配置
  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  
  .babelrc文件
  {
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
  }
  

  如上：版本不一致

• 下载vue-loader@15+的时候，需要而外配置

首先下载依赖包：
第三方loader：
npm i vue-loader vue-template-compiler -D

webpack.config.js配置
{
   test:/\.vue$/,
   use:'vue-loader',
}

运行会报如下错误：

1.ReferenceError: VueLoaderPlugin is not defined
2.vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

还缺少两个配置。因为在vue-loader@15.x 版本，有些东西必须要配置。

配置webpack.config.js
const { VueLoaderPlugin } = require("vue-loader");

然后还在此文件中配置 plugins 节点
plugins: [new VueLoaderPlugin()],

注意点

当你在main.js上引vue的时候
import Vue from 'vue'
在 webpack 中， 使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式；
解决方法一：
// import Vue from '../node_modules/vue/dist/vue.js'
// 回顾 包的查找规则：
// 1. 找 项目根目录中有没有 node_modules 的文件夹
// 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
// 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
// 4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

解决方法二：
在webpack.config.js中设置别名
resolve: {
    alias: { // 修改 Vue 被导入时候的包的路径
      "vue$": "vue/dist/vue.js"
    }
 }

完美了！

================================未完待续 =================================