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中的信息了