vue3学习之使用webpack搭建vue3环境

创建项目

1. 新建一个名为vue3-demo的文件夹
2. 在该文件夹下运行cmd命令行窗口，执行npm init -y 快速生成一个package.json文件
3. 安装依赖webpack webpack-dev-server webpack-cli webpack-merge html-webpack-plugin vue-loader
   命令如下

npm i -D webpack webpack-dev-server webpack-cli webpack-merge html-webpack-plugin  vue-loader

4. 在根目录下创建webpack.base.config.js文件，内容为

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'js/[name].[hash].js',
        path: path.join(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new VueLoaderPlugin()
    ]
}

5. 在根目录下创建webpack.dev.config.js,内容为

const path = require('path')
const WebpackMerge = require('webpack-merge')
const base = require('./webpack.base')
module.exports = WebpackMerge.merge(base, {
    mode: 'development',
    devServer: {
        publicPath: '/',
        port: '9000'
    }
})

6. 在package.json中创建一个命令

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --config webpack.dev.config.js",
    },

7. 运行npm run dev

在运行npm run dev 时，报错

根据报错安装 vue-template-compiler

npm i -D  vue-template-compiler

执行npm run dev 报错

解决办法
package.json的内容如下

{
    "name": "vue3",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --config webpack.dev.config.js",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "html-webpack-plugin": "^5.3.1",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.31.2",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.2",
        "webpack-merge": "^5.7.3"
    },
    "dependencies": {
        "vue": "^3.0.11"
    }
}

在项目中我们用到的vue-template-compiler是同vue2和vue-loader一起使用的，当我们使用vue最新版本时，在不使用vite和vue-cli时，需要和webpack正常使用，需要这么做

1. 首先初始化package.json

{
    "name": "vue3",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "main": "index.js",
}

package.json中设置private为true，那么npm将会拒绝发布它，这是防止意外发布私有存储库的方法。https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc#readme)

安装好了以后执行

npm run dev

这个时候不会报错，打开 http://localhost:9000/，得到一个空白页面

给App.vue填上内容

index.html

main.js

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount("#app")

在次执行命令

npm run dev

结果如下

当前我们只搭建了开发环境，下一节我们搭建生产环境