wabpack5配置vue2

webpack5配置vue2

下载vue2插件(版本号要一致)

	"vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "vue2-org-tree": "^1.3.4",

在webpack.config.js中配置

const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。
//配置vue2
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
    entry: './src/index.js', // 入口文件
    //打包配置
    output: { // 输出配置
        filename: './built.js', // 输出文件名
        path: resolve(__dirname, 'dist') // 输出文件路径配置
    },
    //vue2配置
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            // 'vue$': 'vue/dist/vue.js',
            "@": resolve(__dirname, "./src"),
        },
    },
    //配置打包less
    module: {
        rules: [//识别.vue文件
            {
                test: /\.vue$/,
                loader: "vue-loader",
             },
        ]
    },

    plugins: [
        new VueLoaderPlugin(),
    ],
    mode: 'development' //开发环境
};

创建一个App.vue

<template>
  <div>
hello vue
  </div>
</template>

<script>
export default {
  name: "WebpackApp",
  data() {
    return {
    
    };
  },
  mounted() {},

  methods: {},
};
</script>
<style lang="scss" scoped>
</style>

在入口文件配置

import Vue from 'vue'
import App from './App.vue'
new Vue({
    render:h=>h(App)
}).$mount('#root')