从0搭建webpack5+vue3开发环境

前言

一直以来都在使用基于各种脚手架创建的项目进行开发，很多webpack的配置这些脚手架都已经帮我们封装好了。一般情况下，脚手架提供的能力已经足够我们使用了，有些不适用的地方看看文档改一下配置也能满足。最近一直挺好奇脚手架这个“黑盒”内部的webpack配置是怎么做的，于是就想自己搭一套相关的配置，学习一下。文章不会过多介绍webpack相关的各种配置原理，只是简单记录整个过程，希望能对大家有所帮助。话不多说，我们开始吧。

正式开始

在开始之前请确保我们已经安装了node和npm。推荐使用nvm来安装和管理node版本，本次我使用的node版本是14.20.0

一、初始化空项目

新建一个空白文件夹，然后执行yarn的初始化命令。

mkdir vue3
cd vue3
yarn init -y 

执行完我们就得到了一个只有package.json文件的空项目。

二、安装webpack依赖

接下来我们就要安装webpack相关的依赖了。在终端执行

yarn add webpack webpack-cli -D 

安装的时候发现速度非常慢，我们可以在项目下新增一个.npmrc文件，指定下npm镜像源

三、增加webpack配置文件，完善基本配置

在项目根目录下新建一个webpack.config.js文件，写一点基本的配置。

const path = require('path');

module.exports = {mode: 'development',entry: {main: './src/index.js',},output: {path: path.resolve(__dirname, 'dist'),filename: 'js/[name].[contenthash:8].js',}
} 

在根目录下新建src文件夹，新建一个index.js文件，写点基本的代码

console.log('hello world'); 

在package.json文件增加scripts字段，配置build命令

{"name": "vue3","version": "1.0.0","main": "index.js","license": "MIT","scripts": {"build": "webpack"},"devDependencies": {"webpack": "^5.74.0","webpack-cli": "^4.10.0"}
} 

在终端执行yarn build，然后就能看到生成的打包好的文件啦

"scripts": {"build": "NODE_ENV=production webpack"
} 

然后，修改webpack.config.js文件

// ...

module.exports = {mode: process.env.NODE_ENV,// ...
} 

再次执行yarn build，这个时候生成的代码就很干净了

四、使用clean-webpack-plugin，清理旧的打包文件

上一步最后，我们发现dist目录下有两个main.xxx.js文件，这是因为我们打包了两次，所以生成了两个。我们希望每次打包都自动删掉上次生成的文件，不要有额外的文件干扰我们。要实现这个功能，我们只需要安装一个webpack的插件即可。在终端下执行yarn add clean-webpack-plugin -D，然后在webpack.config.js文件里引入这个插件