webpack搭建vue脚手架（从零开始）
webpack 是什么webpack 五个核心概念EntryOutputLoaderPluginsMode webpack搭建vue步骤第一步：准备工作第二步：配置webpack第三步：配置loader，打包样式资源第四步：打包图片资源第五步：下载插件plugins扩展功能第六步：配置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(自定义)作为项目名
在vue-demo文件夹中再创建一个src文件夹
在src文件夹中创建index.html和index.js文件
在命令行进入vue-demo文件夹下输入以下指令初始化 package.json
npm init
下载并安装 webpack
# 全局安装npm install webpack webpack-cli -g
在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中编写以下代码
// 获取根节点let rootDom = document.getElementById("root")// 添加文字rootDom.innerHTML = "Hello World"
第二步：配置webpack
在vue-demo文件夹下创建文件 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文件，代码如下(建议直接更改原来的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文件(建议直接更改原来的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-loadernpm i sass sass-loadernpm i babel-loader babel-core@6.26.3
配置webpack.config.js文件(建议直接更改原来的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文件(建议直接更改原来的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文件(建议直接更改原来的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-server"},
找到scripts选项配置build和serve选项即可
第六步：配置vue有关
下载vue vue-loader vue-template-compiler
npm i vue vue-loader vue-template-compiler
最终webpack.config.js文件配置(建议直接更改原来的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文件pluginnew 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官网
如果觉得《webpack搭建vue脚手架（从零开始）》对你有帮助，请点赞、收藏，并留下你的观点哦！
