从零开始手写vue项目的webpack基础配置

本文链接：https://blog.youkuaiyun.com/qq_36697004/article/details/126758959

本文详细介绍了如何从头开始创建一个Vue项目，包括设置基本的目录结构，编写`index.html`、`App.vue`和`main.js`文件，配置`webpack.config.js`以处理各种资源文件，以及安装必要的依赖。最后，提到了如何打包和启动项目，完成了一个基于Webpack的Vue开发环境搭建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建目录结构

执行yarn init, 生成package.json文件;

1、写入文件

建立目录结构可参考vue项目目录结构；

首先建立一个src文件夹，其中包含index.html,App.vue, main.js,
其中

index.html 用于挂在vue实例，和外部访问的页面文件
App.vue 用于写入vue文件的入口文件
main.js 用于创建vue实例，并将实例挂在到index.html

2、初始化文件内容

index.html：其中id=app作为挂在vue实例的节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

App.vue: vue文件的入口

<template>
  <div class="root">
    <!-- <router-view /> -->
      qweqweqweqwe
  </div>
</template>

<script>
  export default{
    name: "App",
    data(){
      return{
        routerTransition: 'router-slide-left',
      }
    }
  }
</script>
<style scoped>
  .root{
    color: blue;
    font-size: 20px
  }
</style>

main.js: 项目的入口文件，实例化vue，并将vue实例挂载到指定dom（此项目问 id=app的div元素）上

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

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

3、配置webpack配置

新建文件webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/main.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
  },
  module:{
    rules:[
      {
        test: /\.vue$/,
        use: ['vue-loader'],
        exclude: /node_modules/
      },
      {test: /\.css$/, use:['style-loader','css-loader']},//配置处理.css文件的第三方处理规则
            {test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},
            {test: /\.scss$/, use: ["style-loader",'css-loader','sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},
            {test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader"},
            {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ],
}

配置并安装以上webpack配置中loader和plugin对应的依赖；如package.json所示

{
  "name": "vue-webpack",
  "version": "1.0.0",
  "description": "从零配置vue的webpack开发环境",
  "main": "index.js",
  "author": "zmb",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "vue": "^3.2.37",
    "vue-router": "^4.1.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "@babel/core": "^7.19.0",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "less-loader": "^11.0.0",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.0.0",
    "webpack-dev-server": "^4.10.1"
  }
}

确定目录结构

project
|--src
	|--index.html
	|--view
	|-- App.vue
	|--main.js
|--webpack.config.js
|--package.json

打包与启动

打包使用webpack命令结合webpack.config.json配置文件打包生成dist文件夹；
本地启动使用webpack-dev-server结合webpack.config.json配置文件在本地启动server；

至此，我们通过webpack配置的vue项目就搭建完成了！