技术文章

webpack搭建vue脚手架（从零开始）

自然醒

An editor at Blogzine

2023-08-17
48天前
3592
20 Views
100

webpack搭建vue脚手架（从零开始）

webpack 是什么
webpack 五个核心概念
webpack搭建vue步骤

webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

webpack 五个核心概念

Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)。

Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

Mode

模式(Mode)指示 webpack 使用相应模式的配置。

webpack搭建vue步骤

第一步：准备工作

创建一个文件夹vue-demo(自定义)作为项目名
在这个文件夹中再创建一个src文件夹
在src文件夹中创建index.html和index.js文件
在命令行输入一下指令初始化 package.json

npm init

下载并安装 webpack

# 全局安装
npm install webpack webpack-cli -g
# 本地安装
npm install webpack webpack-cli -D

在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="root"></div>
</body>
</html>

在index.css中编写如下代码

*{
    padding: 0;
    margin: 0;
}
#root{
    height: 100vh;
    color: red;
}

在index.js中引入index.css

// 获取根节点
let rootDom = document.getElementById("root")
// 添加文字
rootDom.innerHTML = "Hello World"

第二步：配置webpack

创建文件 webpack.config.js

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
const path = require( 'path');
module.exports = {
	// 指定当前的开发环境，development（开发模式） | production(生产模式) | null(不指定)
  mode: "development",
  // 指定webpack的入口文件(一般采用绝对路径)
  entry: "./src/index.js",
  // 指定webpack的出口文件
  output: {
    // 文件打包以后的输出路径
    path: path.resolve(__dirname, "dist"),
    // 文件打包以后的名称
    filename: "bundle.js",
    // 自动将上次打包目录资源清空
    clean: true,
  },
};

安装html-webpack-plugin模块打包html文件

npm install html-webpack-plugin

下载完成后，配置webpack.config,js文件，代码如下

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
const path = require( 'path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	// 指定当前的开发环境，development（开发模式） | production(生产模式) | null(不指定)
  mode: "development",
  // 指定webpack的入口文件(一般采用绝对路径)
  entry: "./src/index.js",
  // 指定webpack的出口文件
  output: {
    // 文件打包以后的输出路径
    path: path.resolve(__dirname, "dist"),
    // 文件打包以后的名称
    filename: "bundle.js",
    // 自动将上次打包目录资源清空
    clean: true,
  },
  // plugins 的配置
  plugins: [
    // html-webpack-plugin
    // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的 HTML 文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: "./src/index.html",
    }),
  ],
};

在vsCode终端运行指令如下：

webpack

就会生成一个index.html和bundle.js,这时，点开index.html就能看的Hello World了，但是css还不能生效，需要借助一些loader去加载静态资源

第三步：配置loader，打包样式资源

安装css-loader和style-loader,指令如下

npm i css-loader style-loader

配置webpack.config.js文件

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
const path = require( 'path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	// 指定当前的开发环境，development（开发模式） | production(生产模式) | null(不指定)
  mode: "development",
  // 指定webpack的入口文件(一般采用绝对路径)
  entry: "./src/index.js",
  // 指定webpack的出口文件
  output: {
    // 文件打包以后的输出路径
    path: path.resolve(__dirname, "dist"),
    // 文件打包以后的名称
    filename: "bundle.js",
    // 自动将上次打包目录资源清空
    clean: true,
  },
  module: {
    rules: [
      // 用于解析CSS文件，并处理其中的依赖关系，比如引入的其他CSS文件
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  // plugins 的配置
  plugins: [
    // html-webpack-plugin
    // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的 HTML 文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: "./src/index.html",
    }),
  ],
};

同时，按照上面的方法，可以把less,scss文件以及babel-loader都进行下载安装,指令如下：

npm i less less-loader
npm i sass sass-loader
npm i babel-loader@7 babel-core@6.26.3

配置webpack.config.js文件

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
const path = require( 'path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	// 指定当前的开发环境，development（开发模式） | production(生产模式) | null(不指定)
  mode: "development",
  // 指定webpack的入口文件(一般采用绝对路径)
  entry: "./src/index.js",
  // 指定webpack的出口文件
  output: {
    // 文件打包以后的输出路径
    path: path.resolve(__dirname, "dist"),
    // 文件打包以后的名称
    filename: "bundle.js",
    // 自动将上次打包目录资源清空
    clean: true,
  },
  module: {
    rules: [
      // 用于解析CSS文件，并处理其中的依赖关系，比如引入的其他CSS文件
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // 用于编译Less文件为CSS文件
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // 用于编译Sass/SCSS文件为CSS文件
      {
        test: /\.s(c|a)ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      // 用于将ES6+的代码转换为ES5的代码，以便在旧版浏览器中运行
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
    ],
  },
  // plugins 的配置
  plugins: [
    // html-webpack-plugin
    // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的 HTML 文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: "./src/index.html",
    }),
  ],
};

第四步：打包图片资源

在webpack4以及之前版本都需要借助file-loader和url-loader进行打包图片，而在webpack5版本中不需要了，只需要进行配置就可以了，不需要进行任何loader

直接配置webpack.config.js文件

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
const path = require( 'path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	// 指定当前的开发环境，development（开发模式） | production(生产模式) | null(不指定)
  mode: "development",
  // 指定webpack的入口文件(一般采用绝对路径)
  entry: "./src/index.js",
  // 指定webpack的出口文件
  output: {
    // 文件打包以后的输出路径
    path: path.resolve(__dirname, "dist"),
    // 文件打包以后的名称
    filename: "bundle.js",
    // 自动将上次打包目录资源清空
    clean: true,
  },
  module: {
    rules: [
      // 用于解析CSS文件，并处理其中的依赖关系，比如引入的其他CSS文件
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // 用于编译Less文件为CSS文件
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // 用于编译Sass/SCSS文件为CSS文件
      {
        test: /\.s(c|a)ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      // 用于将ES6+的代码转换为ES5的代码，以便在旧版浏览器中运行
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      // 加载图片等多种类型文件
      {
        test: /(\.png|\.jpe?g|\.gif|\.svg|\.eot|\.ttf|\.wot|\.ttf2|\.woff|\.woff2)$/,
        type: "asset/resource",
      },
    ],
  },
  // plugins 的配置
  plugins: [
    // html-webpack-plugin
    // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的 HTML 文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: "./src/index.html",
    }),
  ],
};

到这里，你再次运行webpack指令，css就生效了
注意：每个css/less/scss文件都需要在入口文件index.js进行引入，才可以

第五步：下载插件plugins扩展功能

安装webpack-dev-server

npm i webpack-dev-server

修改webpack.config.js文件

const { resolve } = require( 'path'); // node 内置核心模块，用来处理路径问题。
const path = require( 'path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
	// 指定当前的开发环境，development（开发模式） | production(生产模式) | null(不指定)
  mode: "development",
  // 指定webpack的入口文件(一般采用绝对路径)
  entry: "./src/index.js",
  // 指定webpack的出口文件
  output: {
    // 文件打包以后的输出路径
    path: path.resolve(__dirname, "dist"),
    // 文件打包以后的名称
    filename: "bundle.js",
    // 自动将上次打包目录资源清空
    clean: true,
  },
  module: {
    rules: [
      // 用于解析CSS文件，并处理其中的依赖关系，比如引入的其他CSS文件
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // 用于编译Less文件为CSS文件
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // 用于编译Sass/SCSS文件为CSS文件
      {
        test: /\.s(c|a)ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      // 用于将ES6+的代码转换为ES5的代码，以便在旧版浏览器中运行
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      // 加载图片等多种类型文件
      {
        test: /(\.png|\.jpe?g|\.gif|\.svg|\.eot|\.ttf|\.wot|\.ttf2|\.woff|\.woff2)$/,
        type: "asset/resource",
      },
    ],
  },
  // plugins 的配置
  plugins: [
    // html-webpack-plugin
    // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的 HTML 文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: "./src/index.html",
    }),
  ],
  // 自动启动浏览器配置
  devServer: {
    // 打包静态资源
    static: {
      directory: path.join(__dirname, 'asset'),
    },
    // 启动 gzip 压缩
    compress: true,
    // 端口号
    port: 8000,
    // 自动打开浏览器
    open: true,
    // 启用Web pack的热启动模块替换特性
    hot: true,
    // 配置代理
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};

此时，如果你想要像vue一样，使用npm run build命令进行打包，使用npm run serve命令启动，你需要在package.json文件进行以下配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack-dev-serve"
  },

找到scripts选项配置build和serve选项即可

第六步：配置vue有关

下载vue vue-loader vue-template-compiler

npm i vue vue-loader vue-template-compiler

最终webpack.config.js文件配置

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

module.exports = {
  // 指定当前的开发环境，development（开发模式） | production(生产模式) | null(不指定)
  mode: "development",
  // 指定webpack的入口文件(一般采用绝对路径)
  entry: "./src/index.js",
  // 指定webpack的出口文件
  output: {
    // 文件打包以后的输出路径
    path: path.resolve(__dirname, "dist"),
    // 文件打包以后的名称
    filename: "bundle.js",
    // 自动将上次打包目录资源清空
    clean: true,
  },
  module: {
    rules: [
      // 用于解析CSS文件，并处理其中的依赖关系，比如引入的其他CSS文件
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // 用于编译Less文件为CSS文件
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // 用于编译Sass/SCSS文件为CSS文件
      {
        test: /\.s(c|a)ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      // 用于解析和转换Vue组件
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      // 解析图片、文本等多种类型
      {
        test: /(\.png|\.jpe?g|\.gif|\.svg|\.eot|\.ttf|\.wot|\.ttf2|\.woff|\.woff2)$/,
        type: "asset/resource",
      },
      // 用于将ES6+的代码转换为ES5的代码，以便在旧版浏览器中运行
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
    ],
  },
  plugins: [
    // plugins 的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的 HTML 文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: "./src/index.html",
    }),
    // 解析vue文件plugin
    new VueLoaderPlugin(),
  ],
  // 自动启动浏览器配置
  devServer: {
    // 打包静态资源
    static: {
      directory: path.join(__dirname, 'asset'),
    },
    // 启动 gzip 压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true,
    // 启用Web pack的热启动模块替换特性
    hot: true,
    // 配置代理
    proxy: {
      '/api': 'http://localhost:3001',
    },
  },
};

修改index.js文件

import "./index.css"

import { createApp } from "vue"

import App from "./App.vue"

createApp(App).mount("#root")

在src文件夹下创建App.vue文件编写以下代码

<template>
    <div>
        {{ num }}
        <button @click="num++">+1</button><br />
    </div>
</template>

<script>
export default {
    data() {
        return {
            num:1
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
};
</script>

<style scoped>

</style>

最后在终端输入npm run serve就运行起来了
到这里就完成vue的基础配置
其余配置请参考webpack官网

本文为[自然醒]所创，转载请带上原文链接，感谢

https://blog.csdn.net/twk857857/article/details/132316376

这场大学生竞赛中，上百支队伍与合合信息用AI共克难题

新闻聚合

评论数 0

留下回复

如果您是个网络喷子或者键盘侠，那么建议您多看少说。

webpack搭建vue脚手架（从零开始）

webpack搭建vue脚手架（从零开始）

webpack 是什么

webpack 五个核心概念

Entry

Output

Loader

Plugins

Mode

webpack搭建vue步骤

第一步：准备工作

第二步：配置webpack

第三步：配置loader，打包样式资源

第四步：打包图片资源

第五步：下载插件plugins扩展功能

第六步：配置vue有关

这场大学生竞赛中，上百支队伍与合合信息用AI共克难题

【mysql】事务的四种特性的理解

新闻聚合

评论数 0

留下回复

分享此文章

【mysql】事务的四种特性的理解

【服务器】Python一行命令搭建HTTP服务器并外网访问 ...

OpenAI深夜放大招，GPT4 API全面开放并弃用一系列...

深入分析Spring的IoC容器：从底层源码探索

高级会员资格

webpack搭建vue脚手架（从零开始）

webpack搭建vue脚手架（从零开始）

webpack 是什么

webpack 五个核心概念

Entry

Output

Loader

Plugins

Mode

webpack搭建vue步骤

第一步：准备工作

第二步：配置webpack

第三步：配置loader，打包样式资源

第四步：打包图片资源

第五步：下载插件plugins扩展功能

第六步：配置vue有关

这场大学生竞赛中，上百支队伍与合合信息用AI共克难题

【mysql】事务的四种特性的理解

新闻聚合

评论数 0

留下回复

分享此文章

【mysql】事务的四种特性的理解