webpack搭建vue项目(vue3.0版本)

[conan1992]

vue3.0也出来几个月了，抽空回顾不用脚手架搭建vue项目

• 此次用的webpack5+vue3.0.0.5

• 和vue2.x版本主要区别：

  • "vue-loader": "^16.1.2"（目前还是beta），然后此版本的vue-loader不再搭配vue-template-compiler；当时一直提示dismatch，折腾了好久，后来是vue-loader版本低了，所以升级到16.1.2，然后需要搭配"@vue/compiler-sfc": "^3.0.5"；还有一点就是之前的vueLoaderPlugin是通过const VueLoaderPlugin = require('vue-loader/lib/plugin');当前vue-loader版本就需要通过const { VueLoaderPlugin } = require('vue-loader')来引入

• package.json

//package.json
{
  "name": "vue3_myself",
  "version": "1.0.0",
  "description": "采用vebpack自己搭建vue3.x项目",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve"
  },
  "keywords": [
    "webpack"
  ],
  "author": "叶城宇",
  "license": "ISC",
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.5",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.1",
    "vue-loader": "^16.1.2",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "vue": "^3.0.5"
  }
}

//webpack.config.js
const path = require("path")
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, "src/main.js"),
    plugins: [new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title: "布加拉提",
            template: "./index.html"
        })
    ],
    module: {
        rules: [{
            test: /.vue$/,
            loader: "vue-loader"
        },{
            test: /.css$/,
            loader: "css-loader"
        },{
            test: /\.(png|svg|jpg|gif)$/,
            use: [
            'file-loader'
            ]
        }
        
        ]
    }
}