webpack从零开始搭建vue项目

风漫漫雨歇歇

已于 2024-03-20 16:48:30 修改

阅读量1.2k

点赞数 15

分类专栏： webpack 文章标签： webpack vue.js 前端 typescript 软件构建

于 2024-03-20 15:17:25 首次发布

本文链接：https://blog.csdn.net/tst116/article/details/136877778

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack一步一步搭建vue项目

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

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

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

文章目录

webpack一步一步搭建vue项目

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', // 配置sourcemap
	devServer: {
		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"]
}