webpack从零开始搭建vue项目

webpack一步一步搭建vue项目

前提：node、git(可选)已安装。node我使用的版本是 16.13.1。本文基本上都是基础配置，更多特殊配置请看其他博客。

本项目包含内容： webapck vue sass postcss babel eslint typescript

项目源码地址：项目源码地址

文章目录

webpack一步一步搭建vue项目
- 1. 新建项目文件夹初始化npm git
- 2. 安装配置webpack
- - 2.1 安装webpack webpack-cli
  - 2.2 配置webpack
  - - 2.2.1 webpack配置文件
    - 2.2.2 新建src目录
    - 2.2.3 配置webpack.base.js 文件
    - 2.2.4 配置webpack.dev.js 文件
    - 2.2.5 配置启动操作 package.json
    - 2.2.6 运行测试
- 3. 使用 clean-webpack-plugin插件，清除旧文件
- 4. 使用 html-webpack-plugin 插件，配置启动页面
- - 4.1 新建 index.html文件
  - 4.2 配置 html-webpack-plugin 插件
- 5. 配置 webpack-dev-server
- - 5.1 配置 webpack-dev-server
  - 5.2 配置运行
  - 5.3 测试 webpack-dev-server
- 6. 插件 zip-webpack-plugin 编译后生成 zip包
- 7. 配置 vue
- - 7.1 下载 vue 与 vue-loader
  - 7.2 配置 vue-loader
  - 7.3 新建src/App.vue文件
  - 7.4 在 src/index.js 中配置vue的启动配置
  - 7.5 配置css的编译
  - 7.6 编译运行dev, 可看到vue内容
- 8 添加 sass postcss 环境
- - 8.1 配置 sass 环境
  - 8.2 配置 postcss
- 9. 添加babel配置
- - 9.1 下载babel 多个npm包
  - 9.2 配置webpack中 babel-loader, webpack.base.js中 mudule -> rules中添加
  - 9.3 添加 bebel-loader的配置信息，在项目根目录新建 babel.config.json。babel-loader会自动使用它
  - 9.4 配置package.json 中的编译浏览器目标, json根节点增加，详细请了解 browserslist配置
- 10. 配置项目 eslint
- - 10.1 下载多个eslint包
  - 10.2 增加 eslint 配置文件，在项目根目录新建 .eslintrc.js 文件
- 11. 添加 typeScript 支持。
- - 11.1 安装ts依赖
  - 11.2 webpack.base.js 添加 module -> rules ts配置
  - 11.3 添加 tsconfig.json 配置文件，在根目录创建该文件
  - 11.4 在增加vue全局类型，在src目录下新建 env.d.ts文件
  - 11.5 babel添加ts支持
  - 11.6 eslint 添加对ts的支持
  - 11.7 在App.vue文件中测试ts,
- 12. 总结
- 13. 其他配置
- - 13.1 progress-bar-webpack-plugin 插件，控制台输出编译进度
  - 13.2 图片资源输出到指定目录
  - 13.3 使用 mini-css-extract-plugin 插件，抽出单独css文件
  - 13.4 copy-webpack-plugin 插件编译过程中复制文件到输出目录的指定目录
  - 13.5 开发中的路径别名

1. 新建项目文件夹初始化npm git

文件夹下运行命令

npm init：初始化项目npm包管理配置。
git init: 初始化项目git版本管理，新建 .gitignore 文件，文件内配置git忽略的文件或文件夹。

2. 安装配置webpack

2.1 安装webpack webpack-cli

npm i -D webpack webpack-cli   # 我的 *"webpack"*: "^5.90.3"   "webpack-cli": "^5.1.4"

2.2 配置webpack

2.2.1 webpack配置文件

webpack无配置文件也可运行，默认加载根目录下的webpack.config.js文件，，这里我比较喜欢在项目根目录创建三个配置文件。

webpack.base.js: webpack基础配置。
webpack.dev.js: webpack开发环境配置。
webpack.prod.js: webpac正式打包环境配置。

如果使用我这种方式需要下载 webpack-merge 包，用与合并webpack配置

npm i -D webpack-merge  // 我用的 "webpack-merge": "^5.10.0"

2.2.2 新建src目录

目录下新建index.js文件，作为程序的入口。在index.js中先随便写一个代码作为测试。

2.2.3 配置webpack.base.js 文件

const path = require("path");
module.exports = {entry: "./src/index.js",    // 配置程序入口output: {filename: './js/[name].[contenthash].js',,  // 配置程序生成的js文件位置和名字，name contenthash为webpack提供的变量字段path: path.resolve(__dirname, 'dist'), // 配置编译生成的文件存放地址，如上面 ./js/ 文件夹会放到dist目录下}
}

2.2.4 配置webpack.dev.js 文件

const { merge } = require("webpack-merge"); // 引入 merge 方法
const baseConfig = require("./webpack.base.js"); // 引入base配置// 合并两个配置
module.exports = merge(baseConfig, {  mode: "development",  // 配置webpack运行模式devtool: 'inline-source-map', // 配置sourcemap
})

2.2.5 配置启动操作 package.json

将package.json中的 “main”: “index.js”, 删掉，已不需要。

配置package.json的 scripts 启动脚本

"scripts": {"dev": "webpack --config webpack.dev.js"  // --config 为配置webpack运行时要加载的配置项},

2.2.6 运行测试

npm run dev  // 控制台运行，看是否dist文件夹下生成js文件

3. 使用 clean-webpack-plugin插件，清除旧文件

多次运行dev就会生成多个js文件，原来生成的没有删除，使用clean-webpack-plugin插件可在每次运行时删除旧文件

npm i -D clean-webpack-plugin   # 我的  "clean-webpack-plugin": "^4.0.0",

再webpack.base.js中配置 clean-webpack-plugin

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");module.exports = {entry: "./src/index.js",output: {filename: './js/[name].[contenthash].js',path: path.resolve(__dirname, 'dist'),},plugins: [new CleanWebpackPlugin()],
}

4. 使用 html-webpack-plugin 插件，配置启动页面

上面配置编译后我们只能看到生成js文件，没有html文件，html-webpack-plugin 这个插件就是解决这个问题的，该插件可以帮助我们生成index.html文件，或者根据我们提供的index.html模版生成编译后的index.html文件，将webpack生成的js文件引入到生成的index.html内。

npm i -D html-webpack-plugin  #

4.1 新建 index.html文件

在项目根目录下新建index.html文件，为插件提供模版

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>webpack</title>
</head><body><div id="app"></div>  // 后续vue挂载点
</body></html>

4.2 配置 html-webpack-plugin 插件

在 webpack.base.js 下配置，其他详细配置请了解 html-webpack-plugin 插件

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/index.js",output: {filename: './js/[name].[contenthash].js',path: path.resolve(__dirname, 'dist'),},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({filename: "index.html", // 生成的文件名字template: "./index.html" // 生成index.html所使用的模版})],
}

再次dev运行，你能看到生成了index.html文件，并且html文件内插入了生成的js文件。

5. 配置 webpack-dev-server

webpack-dev-server 可以一直监控编译我们的程序，有热更新的机制，可以让我们一边修改代码一边查看结果。

npm i -D webpack-dev-server  # 我的版本 "webpack-dev-server": "^4.15.1",

5.1 配置 webpack-dev-server

应为服务于开发环境，所以在webpack.dev.js中配置。

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.js");module.exports = merge(baseConfig, {mode: "development",devtool: 'inline-source-map', // 配置sourcemapdevServer: {static: './dist',open: true,  // 配置运行是否就打开网页port: 8080,  // 配置网页端口，其他配置请参考webpack官网},optimization: {runtimeChunk: 'single',},
})

5.2 配置运行

在package.json中配置

{"scripts": {"dev": "webpack-dev-server --config webpack.dev.js"},
}

5.3 测试 webpack-dev-server

修改 src/index.js 中的代码。

window.onload = () => {document.getElementById('app').innerText = "tian";
}

运行dev，自动打开了项目首页页面，修改innerText值，可查看到修改保存后界面就会变更。

6. 插件 zip-webpack-plugin 编译后生成 zip包

一般我们项目编译后都需要生成zip包去部署，所以这里提供了 zip-webpack-plugin来打包编译生成的项目

安装 zip-webpack-plugin

npm i -D zip-webpack-plugin  # "zip-webpack-plugin": "^4.0.1"

zip一般用于正式环境，所以配置 webpack.prod.js 文件

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.js");
const ZipPlugin = require('zip-webpack-plugin');
const { name: ProjectName, version: Version } = require('./package.json'); // 引入项目名称与版本module.exports = merge(baseConfig, {mode: "production",plugins: [new ZipPlugin({  // 打包压缩filename: `${ProjectName}_${Version}.zip`,// 打包的时候不要把sourcemap压缩进去，zip包给出去是不安全的exclude: [/sourcemaps/],}),],
})

配置product.json 配置编译正式环境

    "scripts": {"dev": "webpack-dev-server --config webpack.dev.js","build": "webpack --config webpack.prod.js"},

运行 npm run build 打包项目

7. 配置 vue

webpack基本内容配置完毕，现在来给项目配置vue开发环境。

7.1 下载 vue 与 vue-loader

npm i -S vue   # "vue": "^3.4.21"
npm i -D vue-loader   # "vue-loader": "^17.4.2",

7.2 配置 vue-loader

vue属于项目base配置，所以在 webpack.base.js中配置。

添加 VueLoaderPlugin 配置。
添加 module -> rules 的 vue文件配置规则

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader');module.exports = {entry: "./src/index.js",output: {filename: './js/[name].[contenthash].js',path: path.resolve(__dirname, 'dist'),},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({filename: "index.html",template: "./index.html"}),new VueLoaderPlugin(),],module: {rules: [{test: /\.vue$/,use: ['vue-loader'],},]},
}

7.3 新建src/App.vue文件

<template><div class="app-hello">{{ welcome }}</div>
</template>
<script setup>
import { ref } from 'vue';const welcome = ref('hello vue');
</script>
<style>
.app-hello {color: blue;font-size: 20px;
}
</style>

7.4 在 src/index.js 中配置vue的启动配置

import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');

7.5 配置css的编译

编译运行dev，报错，忘记配置css了， webpack不能直接处理css, 它只能处理js文件，其他文件需要使用loader编译，使用 style-loader 与 css-loader

npm i -D style-loader css-loader  # "style-loader": "^3.3.4", "css-loader": "^6.10.0",

webpack.base.js中添加配置

        rules: [{test: /\.s?css$/,use: ['style-loader', 'css-loader'],},{test: /\.vue$/,use: ['vue-loader'],},]

7.6 编译运行dev, 可看到vue内容

8 添加 sass postcss 环境

8.1 配置 sass 环境

安装 sass sass-loader

npm i -D sass sass-loader # "sass": "^1.72.0", "sass-loader": "^13.3.3",

配置 sass-loader , 修改 webpack.base.js中的 module -> rules

{test: /\.s?css$/,use: ['style-loader', 'css-loader', 'sass-loader'],
}

8.2 配置 postcss

下载 postcss-loader postcss

npm i -D postcss-loader postcss postcss-preset-env  
# "postcss": "^8.4.36", "postcss-loader": "^7.3.4", "postcss-preset-env": "^9.5.2",

将 postcss-loader 配置到 webpack.base.js 中的 module -> rules -> css配置, 注意配置顺序.
```
{test: /\.s?css$/,use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
```

插件postcss配置文件，在项目根目录下创建 postcss.config.js文件， postcss-loader会自动加载

// postcss.config.js 内容  详细配置请了解postcss
module.exports = {plugins: {"postcss-preset-env": {} // {} 中可以填写插件的配置},
};

9. 添加babel配置

babel很重要，基本项目都要使用，为将新js语法转换成低版本js, 详细了解 babel。

9.1 下载babel 多个npm包

npm i -D @babel/core babel-loader @babel/plugin-transform-runtime @babel/preset-env @babel/runtime-corejs3
# "@babel/core": "^7.24.0",
# "@babel/plugin-transform-runtime": "^7.24.0",
# "@babel/preset-env": "^7.24.0",
# "@babel/runtime-corejs3": "^7.24.0", 
# "babel-loader": "^9.1.3",

9.2 配置webpack中 babel-loader, webpack.base.js中 mudule -> rules中添加

{test: /\.(jsx?)$/,use: ['babel-loader'],exclude: /node_modules/,
},

9.3 添加 bebel-loader的配置信息，在项目根目录新建 babel.config.json。babel-loader会自动使用它

{"presets": [["@babel/preset-env"]],"plugins": [["@babel/plugin-transform-runtime",{ "corejs": 3}]]
}

9.4 配置package.json 中的编译浏览器目标, json根节点增加，详细请了解 browserslist配置

    "browserslist": ["last 2 versions","> 1%","iOS 10","Android >= 5"]

10. 配置项目 eslint

10.1 下载多个eslint包

npm i -D eslint eslint-plugin-vue eslint-config-airbnb-base
# "eslint": "^8.57.0", "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin-vue": "^9.23.0",

这里我们增加了一个规则 eslint-config-airbnb-base，内容请自己了解

10.2 增加 eslint 配置文件，在项目根目录新建 .eslintrc.js 文件

// .eslintrc.js
module.exports = {root: true,extends: ['eslint-config-airbnb-base','plugin:vue/vue3-recommended',],rules: {indent: ['error', 4], // 缩进统一使用'vue/html-indent': ['error', 4],'no-console': 'off','linebreak-style': 'off', // 检查LF或CRLF'import/no-extraneous-dependencies': 'off','import/no-unresolved': 'off',},
};

11. 添加 typeScript 支持。

11.1 安装ts依赖

npm i -D typescript ts-loader  # "ts-loader": "^9.5.1", "typescript": "^5.4.2",

11.2 webpack.base.js 添加 module -> rules ts配置

{test: /\.tsx?$/,use: [{loader: 'ts-loader',options: {appendTsSuffixTo: [/.vue$/],},}],exclude: /node_modules/,
},

11.3 添加 tsconfig.json 配置文件，在根目录创建该文件

{"compilerOptions": {"target": "ESNext",  // 指定es目标版本"allowJs": true,     // 是否允许js"useDefineForClassFields": true,"module": "ESNext",  // 指定生成那个模块代码"moduleResolution": "Node","strict": true,   // 是否启动所有严格类型检查检测选项，能用true最好，新手建议false"noImplicitAny" : false,  // 允许隐式any类型，true：不允许"sourceMap": true,"resolveJsonModule": true,"isolatedModules": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true, // 允许使用import方式导入"lib": ["ESNext", "DOM"],"skipLibCheck": true,"baseUrl": ".",  // paths路径解析起点"paths": {  // 设置路径别名 可以配置多个"@/*": ["./src/*"],},},"include": ["src/**/*",],
}

11.4 在增加vue全局类型，在src目录下新建 env.d.ts文件

declare module '*.vue' {import { DefineComponent } from 'vue';const component: DefineComponent<{}, {}, any>;export default component;
}

11.5 babel添加ts支持

下载babel ts的转换包

 npm i -D @babel/preset-typescript   # "@babel/preset-typescript": "^7.24.1",

配置babel.config.json文件

"presets": [["@babel/preset-env"],["@babel/preset-typescript"]
],

11.6 eslint 添加对ts的支持

下载 eslint ts parser包 @typescript-eslint/parser

npm i -D @typescript-eslint/parser  # "@typescript-eslint/parser": "^6.21.0",

修改 .eslintrc.js 配置文件，exports对象添加属性。

module.exports = {root: true,extends: ['eslint-config-airbnb-base','plugin:vue/vue3-recommended',],parser: 'vue-eslint-parser',parserOptions: {parser: '@typescript-eslint/parser',},rules: {indent: ['error', 4], // 缩进统一使用'vue/html-indent': ['error', 4],'no-console': 'off','linebreak-style': 'off', // 检查LF或CRLF'import/no-extraneous-dependencies': 'off','import/no-unresolved': 'off',},
};

11.7 在App.vue文件中测试ts,

<script setup lang="ts">

12. 总结

这个项目配置已基本完成，好多配置都是基础配置，但也已基本满足开发项目需要，更多配置需要详细了解webpack和各个功能模块的配置。下面我们将介绍一些其他的功能与使用。

13. 其他配置

13.1 progress-bar-webpack-plugin 插件，控制台输出编译进度

下载

 npm i -D progress-bar-webpack-plugin  # "progress-bar-webpack-plugin": "^2.1.0",

在webpack.base.js中使用

const ProgressBarPlugin = require('progress-bar-webpack-plugin');plugins: [// ·····new ProgressBarPlugin(), // 控制台编译可查看到进度
],

13.2 图片资源输出到指定目录

因为使用的webpack5, 它提供了配置 asset/resource 来处理图片，在webpack.base.js中 module -> rules中添加配置

旧版本的webpack使用 url-loader来配置，这里不再说明。

{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource',generator: {filename: 'images/[name].[contenthash:7][ext]',},exclude: /node_modules/,// exclude: /node_modules/,// webpack 旧版本使用 url-loader// use: [{//   loader: 'url-loader',//   options: {//     limit: 5 * 1024, // 小于这个时将会已base64位图片打包处理//     name: './[name].[hash:5].[ext]',//     outputPath: 'images', // 图片文件输出的文件夹//   },// }],
},

问题： ts开发下无法 import Icon from “./icon.png”.

原因： ts无法识别 png等类型资源，需要再 env.d.ts中添加类型说明

/* images.d.ts文件 */
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

13.3 使用 mini-css-extract-plugin 插件，抽出单独css文件

mini-css-extract-plugin 抽离每个js文件中的css内容到新的文件，即通过 JS 文件中import进来的样式文件。它支持CSS和SourceMaps的按需加载。

npm i -D mini-css-extract-plugin  # "mini-css-extract-plugin": "^2.7.7",

配置mini-css-extract-plugin, 在webpack.base.js中修改

const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 插件添加
plugins: [new MiniCssExtractPlugin({filename: 'css/[name]-[contenthash:8].css', // 顶级编译后css文件生成位置与生成名称}),
],
// module -> rules中 css配置修改，去掉 style-loader,改为MiniCssExtractPlugin.loader
// style-loader与MiniCssExtractPlugin.loader做了相似的工作，所以可以替换掉。package.json中的style-loader依赖也可以去掉
{test: /\.s?css$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader',],
},

13.4 copy-webpack-plugin 插件编译过程中复制文件到输出目录的指定目录

copy-webpack-plugin: 一般复制一些固定不变的文件到编译输出目录的指定位置

npm i -D copy-webpack-plugin  # "copy-webpack-plugin": "^11.0.0",

在webpack.base.js 中配置 copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin'); // 引入// 插件添加plugins: [new CopyWebpackPlugin({patterns: [// 从哪复制到哪， to不写表示输出到编译输出目录(dist)的根目录，写表示dist下创建文件夹，并复制该文件{ from: 'src/assets/audio', to: 'audio' },],}),],

13.5 开发中的路径别名

创建 import 或 require 的别名，来确保模块引入变得更简单, 也就是让符号代替经常用到的路径

在webpack.base.js中添加配置

// 在 module.exports 对象下添加属性resolve: {alias: {'@': path.resolve(__dirname, 'src'),  // import时 @就表示src目录js: path.resolve(__dirname, 'src/js'),},},

同时一般也在 tsconfig.json中配置路径别名，和webapck中配置一样

    "paths": {  // 设置路径别名 可以配置多个"@/*": ["./src/*"],"js": ["src/js/"]},

通常用vscode开发项目中，在js代码中有时 @ 符号无法响应你的代码跳转，但运行运行正常，其实缺少一个 jsconfig.json文件，在项目根目录下创建 jsconfig.json文件, 配置和 tsconfig.json 类似

{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"],"js": ["src/js/"]},"experimentalDecorators": true,"jsx": "preserve"},"exclude": ["node_modules", "dist"]
}