从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南

原创

已于 2024-11-04 21:40:10 修改 · 置顶 · 3.3k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack

于 2024-09-12 16:09:28 首次发布

🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱‍🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问作者个人博客网站：sam9029.asia—Webpack入门笔记

由于文章有一万字左右的，故而内容中部分不免冗余，或许有写了些废话进去，但整体也无伤大雅

附录中有脚手架文件夹目录大纲

（Vue3 + Webpack5）脚手架项目源码: https://github.com/sam9029/s9_webpack_guide.git

Webpack入门基础笔记: Sam9029博客_Webpack （从零开始学习）

目前有一个环境变量文件注入的可优化问题：

没有找到一个方案，一次注入.env.XXX环境文件，然后webpack.config.js 和 项目文件(src)都能访问，现在使用另一个组合方案cross-env + dotenv + dotenv-webpack（参考内容位置：注入环境变量）

若有同志知道望告知

文章目录

使用本搭建指南前提

了解安装 Node
了解 webpack 基础配置使用（入口 entry、输出 output、loader、plugin、devServer、resolve、mode）
了解前端项目文件项目结构，将会按照（类似 npm create vite@lastest 创建的脚手架文件目录）

基础构建配置

初始化 package.json 依赖

npm init -y

安装 webpack 工具

安装依赖

npm i webpack webpack-cli -D

本文使用 “webpack”: “^5.93.0”, “webpack-cli”: “^5.1.4”,

配置`webpack.config.js`

创建 src 文件夹

同时创建 webpack.config.js文件

- src
    - main.js
- webpack.config.js

main.js

// // dev-log >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
console.log(`[Dev_Log][${
     
     "HI"}_]_>>>`);

webpack.config.js

构建时 webpack 会自动加载该文件的配置

/** node模块 文件路径path */
const path = require("path");

/** 配置项 */
module.exports = {
   
   
  /** 入口文件 */
  entry: "./src/main.js",
  /** 构建打包输出文件 */
  output: {
   
   
    /** 输出路径 */
    path: path.resolve(__dirname, "dist"), // __dirname:当前文件夹（webpack.config.js所在文件夹）
    /** 文件输出名称 */
    filename: "static/js/[name].[contenthash:6].js", // [name] 表示取文件本身名称，是一种webpack内置的快捷语法，参考https://www.webpackjs.com/configuration/output/#template-strings
  },
};

运行构建命令

npx webpack

查看文件目录会输出 dist 文件夹

恭喜你，初入 webpack

但是你可能会看到以下报错，提取关键信息 mode' option has not been set

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

解决方案：在webpack.config.js追加mode环境配置

/** 配置项 */
module.exports = {
   
   
  // ...其他配置
  mode: "development", // 'development' or 'production'
};

`webpack.config.js`环境设置

开发中一般使用 development-开发模式构建打包项目文件
上线项目时一般使用 production-生产模式构建打包项目文件

HTML 模板文件处理

因为 webpack 只能处理 JS 资源，所以其他资源，如：html, css, jpg, tff(文字)等是需要安装对应的 plugi 插件或者 loader 处理的

安装依赖

npm i html-webpack-plugin -D

创建 public 文件夹

和 src 同级创建 public 文件夹，创建一个 index.html 文件

- public
    - index.html
- src

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>webpack html configuration</p>
  </body>
</html>

webpack 配置 html 资源处理 plugin

/** 配置项 */
module.exports = {
   
   
  // ... 其他配置
  plugins: [
    /** 模板 html 处理 */
    new HtmlWebpackPlugin({
   
   
      /**
       * 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js、css等资源
       * 以 public/index.html 为模板创建文件
       * */
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
};

运行构建命令

npx webpack

或者

npm run build // 需要在 package.json--script 中配置

查看文件目录会输出 dist 文件夹，并且多一个 index.html 文件，还自动压缩了 index.html 代码

动态网页标题（可选）

修改HtmlWebpackPlugin

plugins: [
  new HtmlWebpackPlugin({
   
   
    title: "Custom template",
    template: "index.html",
  }),
];

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body></body>
</html>

CSS 样式文件处理

关于 CSS 的处理整个流程配置较为多, 主要流程如下：

处理CSS文件代码，将CSS 样式代码转化为JS 操作样式（‘css-loader’）
转换JS 操作样式提取 CSS 样式代码，使用 style 标签引入到 html 文件（‘style-loader’）
预处理样式（sscss、less、stylus 预处理）的转化 ( ‘sass sass-loader’ || ‘less-loader’ || ‘stylus-loader’)
提取 CSS 文件（mini-css-extract-plugin）(后面讲解)
处理 CSS 代码兼容性（postcss-loader postcss postcss-preset-env）(后面讲解)
压缩 CSS 文件（css-minimizer-webpack-plugin）(后面讲解)

安装依赖编译 css 文件代码

npm i css-loader style-loader -D

css-loader：负责将 css 文件编译成 Webpack 能识别的模块
style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 css 模块内容

此时样式就会以 Style 标签的形式在页面上生效

添加 css 资源

src/assets/style/index.css

.text {
   
   
  color: #999;
}

src/main.js

// 引入 CSS 资源，Webpack才会对其打包
import "./assets/style/index.css";

// // dev-log >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
console.log(`[Dev_Log][${
     
     "HI"}_]_>>>`);

pubilc/index.html

p 标签哪里加一个 class 类 `class=“text”

<!-- // ...其他  -->
<p class="text">webpack html configuration</p>
<!-- // ...其他  -->

webpack 配置 css 资源处理 loader

/** 配置项 */
module.exports = {
   
   
  // ... 其他配置

  module: {
   
   
    rules: [
      /** 处理 CSS 文件 */
      {
   
   
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  // ... 其他配置
};

scss、less、stylus 预处理

这些预处理样式的 loader 配置类似于 css 的配置，不赘述了，配置参考下方即可

记得先（npm i xxx-loader -D）安装对应的 loader

sass 对应 npm i sass-loader -D

less 对应 npm i less-loader -D

styl 对应 npm i stylus-loader -D

module: {
   
   
    rules: [
      /** 处理 CSS 文件 ...  */

      /** 处理 SCSS 文件 */
      {
   
   
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },

      /** 处理 less 文件 */
      {
   
   
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },

      /** 处理 stylus 文件 */
      {
   
   
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },

vue 文件资源处理（重要）`vue-loader`

安装依赖

安装使用 Vue 框架的最新版本

npm i vue@latest

安装编译.Vue 文件的相关依赖

npm i vue-loader @vue/compiler-sfc -D

了解：使用@符号的依赖通常指的是作用域包（Scoped Packages），比如 @vue/compiler-sfc 就表示，它是 vue 生态的依赖包。

vue-loader：允许你在 webpack 模块打包器中使用 Vue.js 单文件组件（.vue 文件）

@vue/compiler-sfc：这个包是 Vue.js 的一个核心库，用于将 Vue 的单文件组件转换成 JavaScript 模块

创建/修改对应文件

修改public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 预备给Vue实例的挂载DOM -->
  </body>
</html>

新建src/app.vue

<template>
  <div class="container__wrapper">vue3-page-template</div>
</template>

<script setup lang="js">
  import {
     
      ref, computed, onMounted } from 'vue';

  onMounted(()=>{
     
     
    // // dev-log >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    console.log(`[Dev_Log][${ 
       'onMounted生命周期'}_]_>>>`)
  })
</script>

<style lang="scss" scoped>
  .container__wrapper {
     
     
    color: #999;
  }
</style>

修改src/main.js

/* 引入Vue框架 */
import {
   
    createApp } from "vue/dist/vue.esm-bundler";
import App from "./app.vue"; //导入

/* 引入 CSS 资源，Webpack才会对其打包 */
import "./assets/style/index.css";
import "./assets/style/index.scss";

// // dev-log >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
console.log(`[Dev_Log][${
     
     "Main.js 入口"}_]_>>>`);

/* 创建Vue实例并挂载（mount）到id为app的DOM元素上*/
createApp(App).mount("#app");

配置 webpack.config.js

import {
   
    VueLoaderPlugin } from "vue-loader/dist/index";
/** ...其他引入 */

/** 配置项 */
module.exports = {
   
   
  /** ...其他配置 */

  /** loader */
  module: {
   
   
    rules: [
      /** 处理 Vue 文件， vue-loader 不支持 oneOf */
      {
   
   
        test: /\.vue$/,
        use: ["vue-loader"],
      },

      /** ...其他配置 */
    ],
  },

  /** 插件 */
  plugins: [
    /** vue文件处理 */
    new VueLoaderPlugin(),

    /** ...其他配置 */
  ],

  /** ...其他配置 */
};

测试效果

使用 npx webpack 构建生产文件

在 dist 的文件中，查看编译文件

右键 index.html 使用 Open with Live Server，查看网页效果

没有这个选项就，使用 VScode 安装 Live Server 插件之后尝试

网页媒体资源拷贝处理

安装依赖

npm i copy-webpack-plugin -D

copy-webpack-plugin 是一个复制资源文件的插件，这里用于复制 ico 图标资源

在根目录 public 文件夹中新建 favicon.ico

但是 webpack 处理不会自行对 favicon.ico 处理

当你在 index.html 引入时, <link rel="icon" href="./favicon.ico">

就会因为构建文件中没有 favicon.ico 资源而不展示或控制台提示报错

所以需要配置依赖手动拷贝

webpack.config.js 配置

/** node模块 文件路径path */
const path = require("path");
/** 拷贝资源Plugin*/
const CopyPlugin = require("copy-webpack-plugin");

/** 配置项 */
module.exports = {
   
   
  /** ...其他配置 */

  /** 插件 */
  plugins: [
    /** ...其他配置 */

    //复制public资源到index里面
    new CopyPlugin({
   
   
      patterns: [
        {
   
   
          from: path.resolve(__dirname, "./public"), //将根文件夹下 public文件夹复制到dist目录下
          to: path.resolve(__dirname, "./dist"),
          globOptions: {
   
   
            // 忽略index.html文件
            ignore: ["**/index.html"],
          },
        },
      ],
    }),
  ],
  /** ...其他配置 */
};

图片资源处理（可选）

同理类似于 CSS-loader 的配置

由于 Webpack 5 已经内置了 file-loader 和 url-loader 所以图片资源处理，无需安装依赖

配置参如下：

module.exports = {
   
   
  mudule: {
   
   
    /** 构建打包输出文件 */
    output: {
   
   
      // ...其他配置

      /** 图片、字体等资源输出命

最低0.47元/天解锁文章

新学期VIP享超值加赠

从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南

文章目录

使用本搭建指南前提

基础构建配置

初始化 package.json 依赖

安装 webpack 工具

安装依赖

配置webpack.config.js

创建 src 文件夹

运行构建命令

webpack.config.js环境设置

HTML 模板文件处理

安装依赖

创建 public 文件夹

webpack 配置 html 资源处理 plugin

运行构建命令

动态网页标题（可选）

CSS 样式文件处理

安装依赖编译 css 文件代码

添加 css 资源

webpack 配置 css 资源处理 loader

scss、less、stylus 预处理

vue 文件资源处理（重要）vue-loader

安装依赖

创建/修改对应文件

配置 webpack.config.js

测试效果

网页媒体资源拷贝处理

安装依赖

webpack.config.js 配置

图片资源处理（可选）

配置`webpack.config.js`

`webpack.config.js`环境设置

vue 文件资源处理（重要）`vue-loader`