webpack5+vue3搭建项目

一、创建package.json文件

npm init -y

package.json文件：

{
  "name": "03-app1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.26",
    "html-webpack-plugin": "^5.5.0",
    "vue-loader": "^16.0.0-beta.4",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "vue": "^3.2.26"
  }
}

二、安装vue

npm i vue@next
npm i @vue/compiler-sfc -D //单文件组件开发的配套工具

请注意 @vue/compiler-sfc 替换掉了 vue-template-compiler

三、安装打包工具

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

创建入口文件index.js

import {createApp} from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

创建App.vue文件

<template>
    <div id="app">
        {{appName}}
    </div>
</template>

<script>
    export default {
        name: '',
        data() {
            return {
               appName:'我是app1' 
            }
        },
        props: {
           
        },
        components: {
            
        },
        computed: {
            
        },
        watch: {
           
        },
        created() {
            
        },
        methods: {
            
        },
    }
</script>

<style scoped lang='less'>
    
</style>

如果使用了自定义的 webpack 设置：将 vue-loader 升级至 ^16.0.0

npm i vue-loader@16.0.0-beta.4 -D

创建webpack.config.js文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  mode: 'development',

  entry: './src/index.js',

  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack+vue3搭建项目',
      template: './index.html'
    }),
    new VueLoaderPlugin()
  ],

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.(css||less)$/,
        use: ['style-loader', 'less-loader', 'css-loader']
      }
    ]
  }
}

五、错误记录

Module build failed (from ./node_modules/vue-loader/dist/index.js): Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'

vue-laoder版本问题

更新到vue-loader@16.0.0-beta.4

 

ERROR in ./App.vue
Module Error (from ./node_modules/vue-loader/dist/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

在webpack.config.js:

const { VueLoaderPlugin } = require('vue-loader')

module.exports={
	plugins: [
    	new HtmlWebpackPlugin({
      		template: './index.html'
    	}),
    	new VueLoaderPlugin()
  	],
}