我的是webpack 5 使用Vue- Loader 13.0.5如何配置
时间: 2024-02-05 08:11:33 浏览: 120
webpack5:webpack5基础配置vue框架
配置 webpack 5 使用 Vue-Loader 13.0.5 的步骤如下:
1. 安装 `vue-loader` 和 `vue-template-compiler`:
```
npm install vue-loader@13.0.5 vue-template-compiler --save-dev
```
2. 在 webpack 配置文件中添加 loader:
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// ...
]
}
}
```
3. 配置 Vue-Loader 插件:
```javascript
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin(),
// ...
]
}
```
4. 添加 resolve.alias 配置:
```javascript
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
```
完成以上步骤后,webpack 会正确地解析 `.vue` 文件,并将其编译成 JavaScript 代码。
阅读全文