从零开始使用Webpack搭建vue项目(保姆级)

蜡笔小开心

已于 2023-08-17 17:43:43 修改

阅读量432

点赞数 1

文章标签： webpack vue.js 前端

于 2023-08-15 20:32:24 首次发布

本文链接：https://blog.csdn.net/wzr514420887/article/details/132302798

版权

一、创建项目

1.新建项目文件夹，这里使用project-name代替

project-name

2.在项目文件夹中执行npm init 生成 package.json

pnpm init  ##这里使用pnpm纯属个人习惯

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

name         ##表示项目的名称 
version      ##表示项目的版本号
description  ##对项目的描述
main         ##项目的入口文件
script       ##脚本命令配置
author       ##作者(可以使用项目作者的名字)
license      ##证书

3.新建 index.html webpack.confug.js文件

目录结构：

 project-name
+ |- index.html
+ |- index.js
  |- package.json
+ |- webpack.config.js

index.html作为入口文件进行使用，

<!-- index.html -->
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <script></script>
        <div id="app"></div>
    </body>
</html>

在webpack.config.js文件中写入以下配置

// webpack.config.js
'use strict'

const path = require('path')

module.exports = {
  mode: 'development',
  // 配置入口文件 入口的值可以是一个字符串 也可以是一个对象
  entry: './index.js',
  output: {
    filename: 'index.js'     // 打包生成的js文件的名称
    publicPath: '/',         // 公共资源引入的路径
    path: path.resolve(__dirname, 'dist'), // 将打包生成的文件夹解析到dist目录中
  }
}

4.安装Webpack、Webpack-cli依赖包

pnpm install --save-dev webpack webpack-cli

5.修改package.json中的运行命令

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
+   "build": "webpack --config webpack.config.js"
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

二、启动服务

使用 webpack-dev-server 来启动本地服务

1.安装webpack-dev-server

pnpm install --save-dev webpack-dev-server

2.修改 package.json

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
+   "dev": "webpack serve",
    "build": "webpack --config webpack.config.js"
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3.在webpack.config.js文件中添加运行端口号(默认端口号8080)

module.exports = {
 // ...
 devServer: {
   compress: true,
   port: 8080,
 },
};

三、生成HTML文件

使用 html-webpack-plugin 来生成 HTML 文件

1.安装html-webpack-plugin

pnpm install --save-dev html-webpack-plugin

2.在webpack.config.js文件中添加HtmlWebpackPlugin配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

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

四、安装vue相关依赖包

vue-loader、vue-template-compiler、

1.安装vue-loader、vue-template-compiler

pnpm install --save-dev vue-loader vue-template-compiler

也可以配置vue-router

pnpm install --save vue vue-router

2.在 webpack.config.js 中配置 vue-loader 用于引入 .vue 类型文件

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

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

3.路由组件容器、路由表

新建一个 app.vue 文件作为路由组件的容器

<!--  app.vue -->
<template>
    <router-view></router-view>
</template>

<script>
    export default {
        
    }
</script>

创建路由表 index.js文件

// index.js
import {
  createRouter,
  createWebHistory,
  createWebHashHistory
} from "vue-router";

import { createApp } from "vue";
import App from './app.vue'


const routes =  [
  {
     path: "/",
     name: "index",
     component:  () => import('./index.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  mode: "hash",
  routes: routes
});
createApp(App).use(router).mount("#app");

4.新建一个 index.vue 文件作为首页

<template>
    <div>
      <h1>这是首页</h1>
    </div>
</template>

<script>
    export default {}
</script>

五、配置Babel

1.安装 @babel/core @babel/preset-env babel-loader

pnpm install --save-dev @babel/core @babel/preset-env babel-loader

2.在 webpack.config.js 中配置 babel-loader

module.exports = {
  // ...
  module: {
    //...
    rules: [
      // ...
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

3.在根目录创建一个.babelrc 文件

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

参考文章链接：bebel中的preset-env

4. 运行项目

pnpm run dev

出现以下内容即可：

5.打包项目

pnpm run build