webpack（7）webpack使用vue配置

前言

若是咱們想在webpack中使用vue，就須要在webpack中配置vue
 

配置vue

首先，咱們須要在項目中安裝vue，安裝命令以下：

npm install vue --save

安裝完成後，咱們在主入口main.js文件中導入vue並建立一個實例

import Vue from 'vue'
const app = new Vue({
  el: "#app",
  data: {
    message: "hello"
  }
})

最後咱們在index.html中，寫入模板代碼以下：

<div id="app">
  <h2>{{message}}</h2>
</div>

修改完成後咱們從新運行命令打包npm run build，可是運行程序，在頁面上沒有出現想要的效果，且控制檯裏報錯以下

vue.runtime.esm.js:623 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

這個錯誤的意思是說咱們使用的runtime-only的版本Vue，是不能包含模板代碼的，而咱們正好使用了模板代碼，因此報錯

解決方案
解決辦法就是在webpack中配置如下內容

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: "dist/"
  },
  // 新增的vue配置，給vue取別名
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png/,
        type: 'asset'
      },
    ],
  },
}

配置完成以後，咱們在訪問首頁，就能正常顯示message中的信息了