基于 vue3 + webpack 5 + sass+ vw 适配方案+axios 封装，从0构建手机端模板脚手架

Webpack5正式发布也有很长长长一段时间了,上手了一段时候后发现真香。webpack5的新特性使得我们在配置上比以往版本更加方便了，构建速度也有了质的飞跃。本文着重为大家讲解从 0 到 1 搭建 vue3 + webpack 5开发环境的过程中遇到的疑问。

项目地址: webpack5-vue3

demo地址: https://zhouyupeng.github.io/webpack5-vue3/#/

先看一下配置好的项目目录结构

├─build
│  ├─webpack.base.conf.js 
│  ├─webpack.dev.conf.js   
│  ├─webpack.prod.conf.js 
│  ├─webpack.rules.conf.js 
├─node_modules
├─public
|  |-index.html
└─src
|  ├─api
|  ├─assets
|  ├─components
|  ├─filters
|  ├─plugins
|  ├─router
|  ├─store
|  ├─style
|  ├─utils
|  ├─views
|  |-App.vue
|  |-main.ts
|-.env.dev
|-.env.test
|-.env.prod
|-.gitigore
|-babel.config.js
|-package.json
|-postcss.config.js

接下来，我们使用 Webpack5 从0搭建一个完整的 Vue3 的开发环境！

环境(environment)

webpack 5 运行于 Node.js v10.13.0+ 的版本。

本文涉及到依赖的版本号

├── webpack           5.43
├── webpack-cli       4.7.2
├── node              14.17.0

初始化目录

第一步： 创建目录并且初始化 package.json

mkdir webpack5-vue3 && cd webpack5-vue3
yarn init -y

第二步： 安装webpack三件套

yarn add webpack webpack-cli webpack-dev-server -D

注意：

1. -D 等价于 --save-dev; 开发环境时所需依赖
2. -S 等价于 --save; 生产环境时所需依赖

第三步：初始化目录和文件

• 创建./build/webpack.config.js文件和./src/main.js文件并且写上webpack打包配置代码

// webpack.config.js
const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, '../src/main.js'), // 入口
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: './js/[name].[chunkhash].js',
        publicPath: './',
    },
}

• 在package.json的scripts里写上打包命令

"build": "webpack --config ./build/webpack.config.js --mode production --progress --color -w"

参数详解

• –config或-c： 提供 webpack 配置文件的路径，例如 ./webpack.config.js
• –mode：配置环境也可写在配置文件里 不配置mode 默认production模式打包
• –progress： 启用在构建过程中打印编译进度
• –color： 启用控制台颜色
• –watch或-w： 监听文件变化

运行打包脚本yarn build看到webpack运行并且打包成功了。

配置开发服务器

webpack5 + webpack-cli4 启动开发服务器命令与之前有所变化，从 webpack-dev-server 转变为 webpack serve,

"build": "webpack serve --config ./build/webpack.config.js --mode development --progress --color",

运行起来后出现了另外的问题。改了代码控制台重新编译，但是热更新无效。

看一下无效的启动和有效启动之后的 network 截图对比：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QOTs8jF9-1627564441599)(https://card.h5551.com/gPONlR.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vQQTHdw2-1627564441603)(https://card.h5551.com/gPxobq.png)]

网上找了一圈，说删除 package.json 里的 browserslist可以热更，截止我写这篇文章安装的依赖版本时不行，
最后在issues看到解决办法，按照官方给出的解释好像只会在[email protected]中修复这个问题，这里安装beta最新版本yarn add webpack-dev-server@lastest -D，运行代码发现热更新成功。
安装webpack-dev-server 4.X版本后配置发生了很多改变，废弃了很多以前的配置
4.x配置点我点我或者看这里

分环境打包

在我们平时项目开发中，一般都会有：开发环境、测试环境、预发布环境和生产环境。现在来对 webpack 的配置文件进行环境拆分。

拆分文件

├─build
│  ├─webpack.base.conf.js   //公共配置
│  ├─webpack.dev.conf.js    //mode为development配置
│  ├─webpack.prod.conf.js   //mode为production配置
│  ├─webpack.rules.conf.js  //loader配置

配置环境变量

使用dotenv来按需加载不同的环境变量，VUE CLI3的环境变量也是使用的这个插件

• 安装dotenv插件

yarn add dotenv -D

• 修改webpack.base.conf.js

//...
const envMode = process.env.envMode
require('dotenv').config({ path: `.env.${envMode}` })
// 正则匹配以 VUE_APP_ 开头的 变量
const prefixRE = /^VUE_APP_/
let env = {}
// 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中
for (const key in process.env) {
    if (key == 'NODE_ENV' || key == 'BASE_URL' || prefixRE.test(key)) {
        env[key] = JSON.stringify(process.env[key])
    }
}

plugins: [
    //...
    new webpack.DefinePlugin({ // 定义环境变量
        'process.env': {
            ...env
        }
    })
]

• 修改package.json

"scripts": {
"dev": "cross-env envMode=dev webpack serve --config ./build/webpack.dev.conf.js  --color",
"build": "cross-env envMode=prod webpack --config build/webpack.prod.conf.js  --color",
"build:test": "cross-env envMode=test webpack --config build/webpack.prod.conf.js  --color"
},

• 配置变量文件

.env.dev
.env.test
.env.prod

配置完成后可以像VUE CLI3一样使用环境变量了点我点我

配置核心功能

将 ES6+ 转 ES5

由于有些浏览器无法解析 ES6+ 等高级语法，故需要将其转化为浏览器能够解析的低版本语法

yarn add @babel/core @babel/preset-env babel-loader -D
yarn add core-js -S

loader配置

// webpack.rules.conf.js
rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
        }
    }, 
]

Babel 配置文件
Babel的配置文件是Babel执行时默认会在当前目录寻找的文件，主要有.babelrc，.babelrc.js，babel.config.js和package.json。它们的配置项都是相同，作用也是一样的，只需要选择其中一种。
推荐使用后缀名是js配置文件，因为可以使用js做一些逻辑处理，适用性更强。

// babel.config.js
const presets = [
    ["@babel/preset-env", {
        "useBuiltIns": 'usage', // 这里配置usage 会自动根据你使用的方法以及你配置的浏览器支持版本引入对于的方法。
        "corejs": "3.11.0" // 指定 corejs 版本 
    }]
]
const plugins = [
]
module.exports = {
    plugins,
    presets

}

产出HTML

安装 html-webpack-plugin 插件处理 index.html 文件，此插件的功能是根据提供的模板文件，自动生成正确的项目入口文件，并把 webpack 打包的 js 文件自动插入其中

yarn add html-webpack-plugin -D

plugins配置

webpack.base.conf.js
new HtmlWebpackPlugin({
    template: path.resolve(__dirname, '../public/index.html'),
    filename: 'index.html',
    title: 'webpack5+vue3',
    minify: {
        html5: true, // 根据HTML5规范解析输入
        collapseWhitespace: true, // 折叠空白区域
        preserveLineBreaks: false,
        minifyCSS: true, // 压缩文内css
        minifyJS: true, // 压缩文内js
        removeComments: false // 移除注释
    },
    files: prodMode ? cdn.prod : cdn.dev //CDN引入文件配置
}),

这里的index.html源文件放在../public/文件夹里。
注意： 配置动态网页标题时，需将模板中的