webpack上手实操：构建vue项目（新手篇）

大家好，我叫爱勇宝，web前端的一名小学生，从事前端开发到目前时长已有两年半了，喜欢摄影，第一次在掘金这么大的平台写博客，请大家多多关照，下面我们步入正题↓

一. 初识webpack

我觉得没用过或者说没听说过webpack的小伙伴，不足以为一个合格的前端（玩笑话）。那么它到底是干什么的，对前端做了哪些"贡献"呢？？？

1. 基本概念

从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包），它其实就是我们平常用的node的一个第三方模块包。

2. 前端模块化

随着技术的不断更新迭代，前端出现了模块化的概念，因此出现了模块化方案像：CMD、AMD、CommonJS、ES6这些。但是呢我们的浏览器并不能识别他们，于是乎就出现了webpack，它可以使浏览器认识我们写的一系列代码。

3. 小结

其实webpack是一个十分复杂的技术，我作为一个小学生想要完全掌握它还任重而道远，这里附上webpack官网，方便大家自行学习。

二、项目前期准备

想要使用webpack构建一个vue项目，前端的准备工作是必须的，主要是环境的搭建。

1. node安装

构建项目我们需要使用到npm包管理工具，因此我们需要下载nodenode官网

这里我们下载LTS稳定版。下载完成后直接安装下一步，打开命令行看到如下显示说明node安装成功。

2. 全局安装typescript

因为我们的浏览器不支持typescript语法，所以我们需要使用tsc命令把代码转换为浏览器可以识别的ES5，其实对于本次案例来讲我们使用它的目的是构建我们的Vue3项目，打开我们的命令行工具运行。

shell 复制代码

npm install -g typescript

3. 代码编辑器

这里我使用的是VsCode。VsCode官网

Vscode对前端开发者十分的友好。体积小，插件齐全，大大提高了开发效率。

三、Vue项目结构搭建

前期准备工作做好之后，我们开始构建Vue项目。案例相对简单，只是带领大家了解认识webpack的一个构建过程。再次强调如想深入学习请移步webpack官网

1. 初始化package.json

新建一个文件夹这里我取名为webpack-demo-vue，然后使用我们的VsCode打开。键盘按住Ctrl和Tab上方的波浪线按键可以打开终端。

在终端输入npm init -y生成package.json文件

shell 复制代码

npm init -y

package.json相关配置项，我们暂时可以不用着急看里边的东西，后边我会慢慢的给大家一一解答，看不懂大家收起来就好了！

json 复制代码

{
    "name": "vue-demo-webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack serve", // 这是开发环境的启动命令
        "build": "webpack" // 这是打包命令
    },
    "author": "",
    "license": "ISC",
    // 这是生产环境，项目上线后这些也会一同打包
    "dependencies": {
        "@vue/compiler-sfc": "^3.3.13",
        "clean-webpack-plugin": "^4.0.0",
        "css-loader": "^6.8.1",
        "friendly-errors-webpack-plugin": "^1.7.0",
        "html-webpack-plugin": "^5.6.0",
        "sass": "^1.69.5",
        "sass-loader": "^13.3.3",
        "style-loader": "^3.3.3",
        "ts-loader": "^9.5.1",
        "typescript": "^5.3.3",
        "vue": "^3.2.36",
        "vue-loader": "^17.4.0",
        "webpack": "^5.89.0",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1"
    }
}

package.json十分的重要，我们的运行命令 和打包命令 都需要在这里边进行配置，它还记录了我们使用到的每个包的版本信息 。方便其他人在github或gitee拉取我们的项目的时候直接命令行使用npm install安装依赖。

2. 初始化tsconfig.json

这是一个ts配置文件，里边的配置项相当的多和复杂，因为我们要构建一个Vue3的项目所以后面演示会使用到typescript

js 复制代码

tsc --init

tsconfig.json的一些配置项，我们本次案例不会使用到里边的配置项，因为配置项太多了，这里就不给大家粘了，如果想深入学习，还请移步typescript官网

3. 初始化目录

仿照Vue3项目目录我们来创建一下文件夹，效果如下图：

下面我给大家来讲解一下每一个文件或者文件夹是用来做什么的：

node_modules:我们下载的每一个依赖包源代码都会放在这个文件夹下边，一般我们上传到github或gitee时是会忽略此文件夹的。
public:这个文件夹里边的文件不会被编译。
src:这个文件夹是我们编写代码的核心。
- assets:存放我们项目的一些静态文件像：图片、图标、字体等。
- views:存放项目的页面组件。
- App.vue:相当于我们展示views文件夹里边页面的主入口。
- env.d.ts:用于typescript识别类型。
- main.ts:项目的主入口文件。
package.json:里边存在着每个依赖包的版本信息，我们拿过来一个项目直接npm install就会重新下载，这也是为什么我们不需要上传node_modules的原因，其次就是占用体积太大。
tsconfig.json:配置我们的typescript。
webpack.config.js:很重要，项目能不能跑起来全靠它。配置我们的打包，代码解析。

4. 创建index.html

在/public/新建index.html用于我们的模版

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-demo-webpack</title>
</head>
<body>
    <!-- 刚才我们提到的App.vue最终会挂载到我们这个元素下 -->
    <div id="app"></div>
</body>
</html>

5. 创建公共index.css

在/src/assets/新建index.css

一般会有一个初始化css样式，这里我就叫index.css有时叫reset.css。这个文件主要是为了演示我们的webpack配置解析css文件。

css 复制代码

/* 这里我就随随便便写两行意思意思 */
body, html {
    height: 100%;
}

四、编写配置webpack（本文核心）

这是本文的核心知识点（虽然少的可怜），我希望大家可以静下心来慢慢去感受。技术上如有不妥，还请谅解和批评。

这里给大家补充一个知识点↓

shell 复制代码

# 通常会看到这种安装
npm install xxx -D/-S

这里给大家解释一下下：

这个-D呀其实就是Development也就是开发环境，通过这个配置下载的依赖包上线的时候不会打包到我们的项目中。
这个-S那就是生产环境喽Production不知道这个单词写的对不对。它正好和-D相反。

1. 配置wenpack.config.js

因为呀我们的webpack遵循node的导入模式，所以我们不能使用import而是使用require。

js 复制代码

module.exports = {
    mode: 'development', 
    entry: './src/main.ts',
    output: {
        filename: '[fullhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: //,
                use: [],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        extensions: [".tsx", ".ts", ".js"]
    },
    devServer: {
        port: '8000'
    },
    stats: 'errors-only'
}

webpack.config.js各个配置简单解析↓

mode:这个是决定我们的开发环境的 development 和 production
entry:配置入口文件，没错这里就是我们的 main.ts
output:打包后的文件存放路径，filename是我们打包后js的文件名，path是我们存放的一个路径，这里我们需要引入node的path模块。
module:用来配置文件解析像：css、vue、scss，我们注意一下这个exclude属性，它的意思就是webpack不会去打包node_modules文件夹下边的代码。
plugins:一些插件的注册，一般插件都是需要new的。
resolve:项目的一些配置像：@符的使用这些，这个extensions很不错，我们可以在import的时候不需要写文件的后缀名啦。
devServer:代理的配置，没错经常跨域如果需要后面我们单独讲讲这个跨域的问题，这个port就是变更一下端口号，这里我举例8000，也就是http://localhost:8000
stats：这个配置项我们一会遇到在讲解，怕大家忘了

2. 安装webpack webpack-cli webpack-dev-server

webpack是打包代码时的核心内容。
webpack-cli是一个用来在命令行中运行webpack的工具。
webpack-dev-server本地运行我们要用这个东东

shell 复制代码

npm webpack webpack-cli

安装好之后呢我们需要在package.json中配置一下把它用起来。

shell 复制代码

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve", // 这个是本地运行命令
    "build": "webpack" // 这个是打包的命令
}

3. 编写一下main.ts

这个main.ts是我们的入口文件，我们需要写一写代码，得给它个面子。

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
// import '@/assets/index.css' 这行先注释，一下我们让webpack支持css解析

// 看见下边这行代码了吗？这个createApp(App)最终挂载到了我们 /public/index.html里边一个id叫app的Dom元素上啦
createApp(App).mount('#app')

package.json配置好之后我们就可以在终端中输入npm run build打包啦，小伙伴们赶紧试一下成功了没。

结果让小伙伴们大失所望，三个问题：

我发现项目识别不到我们的App.vue文件，准确的说是typescript识别不到，怎么办，让它识别到就好了，给它声明一下。还记得那个/src/env.d.ts文件吗？我们要写一写它了：

ts 复制代码

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

我们还没有安装vue和@vue/compiler-sfc，嘿嘿，安装一下，别打我
- @vue/compiler-sfc：这个主要是用于单文件组件的
shell 复制代码
```
# 弥补一下大家，我给大家安装个最新的
npm install vue@next @vue/compiler-sfc
```
项目解析不了template怎么办

安装这两个东西
shell 复制代码
```
npm install vue-loader html-webpack-plugin    
```

我们在编写一下webpack.config.js配置一下plugins和module

js 复制代码

// 引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')

......
plugins: [
    new HtmlWebpackPlugin({
        template: './public/index.html'
    }),
    new VueLoaderPlugin()
],
module: {
    rules: [
        // 配置打包vue文件
        {
            test: /\.vue$/,
            ues: 'vue-laoder'
        },
        exclude: /node_modules/
    ]
}

这个打包发现可以了，终于好使了，我滴个乖乖。

4. 解决控制台警告

项目是跑起来了，乍一看没毛病，但是打开控制台有一个警告，心里顿时不舒入了，请看大屏幕↓

解决办法：我们来到webpack.config.js，引入webpack

js 复制代码

const { DefinePlugin } = require('webpack')

......
plugins: [
    new DefinePlugin({
        BASE_URL: "'./'",
        // 是否开启 options API，学习Vue3之后我们知道，以前我们学习vue主要是options语法，Vue3新增了setup语法（推荐）。
        __VUE_OPTIONS_API__: true,
        // 生产环境是否支持DEVTOOLS
        __VUE_PROD_DEVTOOLS__: false
    }),
]

再次npm run build打包，发现警告消失啦，啦啦啦！！！

5. 清空dist文件

我们发现每次变更重新打包后呢，我们的dist文件夹并不会删除之前的js文件，很苦恼，下面我们就来解决一下，其实很简单啦，使用到一个插件clean-webpack-plugin，然后配置一下我们的plugins

js 复制代码

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

......
plugins: [
    new CleanWebpackPlugin()
]

就是如此这么的简单啦！！！

6. 友好提示

这个效果你一定很有印象，如果你用过vue2的话。我先给它配置好，给你看个效果就知道了。

js 复制代码

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

......
plugins: [
    new FriendlyErrorsWebpackPlugin({
        // 成功的时候输出
        compilationSuccessInfo: {
        messages: [`Your application is running here: http://localhost:8080`]
        },
        // 是否每次都清空控制台
        clearConsole: true,
    })
]

试着执行一下npm run dev

7. 解析typescript

安装typescript、ts-loader去识别.vue文件中的typescript

配置webpack.config.js

js 复制代码

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

8. 解析css、sass

我们本次案例使用sass这个我们先安装一下所需要用到的依赖包。

shell 复制代码

npm i sass sass-loader style-loader css-loader

配置一下下我们的webpack.config.js中的module

js 复制代码

module: {
    rules: [
        // 配置解析css
        {
            test: /\.css$/,
            // 这东西是有顺序的，大家注意
            use: ['style-loader', 'css-loader'],
            exclude: /node_modules/
        },
        // 配置解析scss
        {
            test: /\.scss$/,
            // 这东西是有顺序的，大家注意
            use: ['style-loader', 'css-loader', 'sass-loader'],
            exclude: /node_modules/
        },
    ]
}

五、完整版源代码

1. package.json

json 复制代码

{
    "name": "vue-demo-webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack serve",
        "build": "webpack"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@vue/compiler-sfc": "^3.3.13",
        "clean-webpack-plugin": "^4.0.0",
        "friendly-errors-webpack-plugin": "^1.7.0",
        "html-webpack-plugin": "^5.6.0",
        "vue": "^3.2.36",
        "vue-loader": "^17.4.0",
        "webpack": "^5.89.0",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1",
        "ts-loader": "^9.5.1",
        "typescript": "^5.3.3",
        "css-loader": "^6.8.1",
        "sass": "^1.69.5",
        "sass-loader": "^13.3.3",
        "style-loader": "^3.3.3"
    }
}

2. webpack.config.js

js 复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const path = require('path')

module.exports = {
    mode: 'development',
    entry: './src/main.ts',
    output: {
        filename: '[fullhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    stats: 'errors-only',
    plugins: [
        new DefinePlugin({
            BASE_URL: "'./'",
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin(),
        new FriendlyErrorsWebpackPlugin({
            // 成功的时候输出
            compilationSuccessInfo: {
                messages: [`Your application is running here: http://localhost:8080`]
            },
            // 是否每次都清空控制台
            clearConsole: true,
        })
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            appendTsSuffixTo: [/\.vue$/]
                        }
                    }
                ],
                exclude: /node_modules/
            },
        ]
    },
    devServer: {
        port: '8080' // 默認端口
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        extensions: [".tsx", ".ts", ".js"]
    },
}

总结

与大家心交心

大伙都阅完了吗？真是辛苦大家了，辛苦各位宝宝了。那有没有从中获得那么一丝丝的果实呢？

其实这个webpack这门技术或者说是门艺术就像我开头所说的，我这些真的只是冰山一角，很小的一角。很多东西都等着我们自己去探索，我也一直坚信不管是在我们的学习还是成长过程中，思想是非常非常非常重要的，就像文学家说的那样，我们要成为一颗有思想的芦苇，不能懈怠自己，多向优秀的人学习，学习他们的思想，转化为我们自己的精神食粮。

希望我们能够共同进步，也请您能够留下一个足迹，我会开心的睡不着觉的，嘻嘻嘻！！！

最后祝愿每一位小伙伴都能够有一个美好的明天。