刚入门webpack就接触4.0,才发现很多和前版本很多出入,也因此踩了很多坑,现在把遇到的坑都慢慢填上
-
首先在babel这里
- 要保证版本一致,低版本就都是低版本,高版本就都是高版本
详解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"
}
}
完美了!
================================未完待续 =================================