手动搭建webpack +vue3.2.x 项目

手动搭建webpcak5x +vue3.2.x + element-plus

第一步新建文件夹 test

初始化package.json

mkdir test
cd test
npm init -y

第二步 新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习webpack</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

第三部 安装webpack webpack-cli webpack-dev-server

npm install webpack webpack-cli webpack-dev-server 
yarn add webpack webpack-cli webpack-dev-server

安装 vue3.2.x vue-router4x vue-loader

npm install vue vue-router -D 
npm install vue-loader

安装 loader

npm install css-loader style-loader less less-loader

安装 bebel

npm install babel-loader @babel/core @babel/plugin-transform-runtime  @babel/preset-env babel-plugin-import 
npm install @babel/runtime

安装plugin

 npm install clean-webpack-plugin html-webpack-plugin

安装element-plus

npm install element-plus
yarn add element-plus

./src/main.js


import { createApp } from "vue"
import appd from "./app.vue"
import router from "./router"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(appd)
app
.use(ElementPlus)
.use(router)
.mount('#app')

./src/app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script setup>
    console.log('进来啦')
</script>
<style>
html,body,#app{
    height: 100%;
    width:100%;
}
*{
    margin: 0;
    padding: 0;
}
</style>

./src/router/index.js

import {createWebHistory,createRouter,createWebHashHistory} from "vue-router"
 const router = createRouter({
    history:createWebHashHistory(),
    // history:createWebHistory(),
    routes:[
        {
            path:'/',
            redirect:"/home"
        },
        {
            path:"/home",
            name:"home",
            component:()=>import(/* webpackChunkName: "home" */'../views/layout/index.vue')
        },
        {
            path:"/sun",
            name:"sun",
            component:()=>import(/* webpackChunkName: "sun" */'../views/sun/index.vue')
        }
    ]
})
export default router

./src/views/layout/index.vue

<template>
    <div class="common-layout">
        <div class="common-layout-header">Header</div>
        <div class="common-layout-container">
            <div class="common-layout-container-aside">
                <asideMenu />
            </div>
            <main class="common-layout-container-main">Main</main>
        </div>
    </div>
</template>
<script  setup>
import { ref, reactive } from 'vue';
import asideMenu from "./aside.vue"
</script>
<style lang='less' scoped>

.common-layout {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.common-layout-header {
    height: 50px;
    background-color: aqua;
}

.common-layout-container {
    height: calc(100% - 50px);
    display: flex;
}
.common-layout-container-aside{
    width: 200px;
    background-color: skyblue;
}
.common-layout-container-main{
    flex:1;
    background-color:yellow;
}

</style>

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"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.18.5",
    "@babel/plugin-transform-runtime": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "babel-loader": "^8.2.5",
    "babel-plugin-import": "^1.13.5",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "style-loader": "^3.3.1",
    "vue-loader": "^17.0.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2"
  },
  "devDependencies": {
    "@babel/runtime": "^7.18.3",
    "element-plus": "^2.2.6",
    "vue": "^3.2.37",
    "vue-router": "^4.0.16"
  }
}

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { HotModuleReplacementPlugin } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    mode: 'development',
    entry: "./src/main.js",
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: "inline-source-map", //报错直接定位到行 列
    devServer: {
        host: "localhost",
        port: 8888,
        hot: true,
        open: true,
        compress: true,
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'test', //页面标题
            template: 'index.html'
        }),
        new HotModuleReplacementPlugin(), 
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        // cacheDirectory: true,
                        presets: ['@babel/preset-env'],
                        plugins: [
                            '@babel/plugin-transform-runtime',
                        ]
                    }
                }],
            },
            {
                test: /\.vue$/,
                use:[ 'vue-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader','less-loader'],
            }
        ]
    }
}
posted @ 2022-06-20 17:58  清风~~徐来  阅读(146)  评论(0)  编辑  收藏  举报