从0 搭建vue3+webpack5项目，不使用cli脚手架

从0搭建vue3+webpack5项目

一、初始化

1、先创建一个空文件夹 demo（任意命名）

• 在当前文件夹下打开cmd 命令框 输入 npm init -y 初始化项目生成package.json 文件
• 在后面加上 -y 能够让我们省去填写信息的步骤。
• 如果文件夹里面出现了package.json 文件那么说明你成功初始化了项目。

二、安装依赖

在cmd 命令框中 输入

1、安装webpack 注意这里是在本地安装，而不是全局安装。

 npm install webpack webpack-cli -D

2、安装vue3和解析模板

 npm install vue@next
 npm install vue-loader@next
 npm install @vue/compiler-sfc

3、安装css解析模板

 npm install css-loader
 npm install style-loader

4、安装 html-webpack-plugin

npm install --save-dev webpack-dev-server

htmlWebpackPlugin能让你省去在dist下创建index.html的麻烦，它能够自动根据main.js创建html文件，或者可以自定义模板。

5、安装 webpack-dev-server

webpack-dev-server提供了一个基本的web server环境，并且内置了热更新功能，但是我们并不需要，因为vue-loader已经有热更新了

需要安装：   npm install webpack-dev-server -D

三、编写项目文件和webpack区分 开发环境 dev 和生产环境 prod的配置

1、创建好的文件夹和文件是这样的，文件创建好之后，接下来我们开始配置各个文件

一、webpack的配置

介绍：在开发大项目时，我们一般需要根据不同的环境来进行不同的配置，所以我们需要对webpack的配置文件做一个拆分。

1、创建一个config目录，用来区分不同环境的配置文件：

• webpack.common.js：用来配置公共的webpack配置
• webpack.dev.js：用来配置开发环境专有的webpack配置
• webpack.prod.js：用来配置生产环境专有的webpack配置

2、在不同环境的配置文件中，使用webpack-merge中的merge来合并公共的webpack配置文件(webpack4中是通过smart来合并的)

npm i webpack-merge -D

// webpack.common.js 公共的配置
const path = require('path')
//vue-loader@next版本之后需要引入这个插件
const { VueLoaderPlugin } = require('vue-loader')
// 自动根据main.js创建html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  entry: './src/main.js',	//打包的入口
  //设置别名
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    },
  },
  // 这个配置项是我们运行打包时出现的警告，提示我们打包文件过大，，这里是我们的demo 配置练习，我们这里进行这样一个配置就不会出现警告啦。
  performance: {
    hints: 'warning', // 枚举 false关闭
    maxEntrypointSize: 100000000, // 最大入口文件大小
    maxAssetSize: 100000000, // 最大资源文件大小
    assetFilter: function (assetFilename) { //只给出js文件的性能提示
      return assetFilename.endsWith('.js');
    }
  },
  //添加模块
  module: {
    rules: [
      {//设置.vue文件的解析规则
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {//设置css的解析规则
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
        ]
      },
    ],
  },
  devtool: 'inline-source-map',	//错误追踪工具
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',	//配置输出后的html文件名（可携带目录）
      template: './public/index.html'	//配置模板
    })
  ],
  //配置webpack-dev-server将dist下的目录代理到web server
  devServer: {
    static: './dist'
  }
}



// webpack.dev.js 开发环境的配置
const path = require('path')
const commonConfig = require('./webpack.common')
const { merge } = require('webpack-merge')
const devConfig = {
  mode: 'development', // 开发环境
  output: {
    filename: 'bundle.js',  // 输出文件名
    path: path.join(__dirname, '..', 'dist')  // 输出目录
  }
}
module.exports = merge(commonConfig, devConfig)



// webpack.prod.js 生产环境的配置
const path = require('path')
const commonConfig = require('./webpack.common.js')
const { merge } = require('webpack-merge')

const prodConfig = {
  mode: 'production', // 生产环境
  output: {
    filename: 'bundle.[chunkhash].js',  // 输出文件名，一般要加上hash
    path: path.join(__dirname, 'dist'),  // 输出目录
    clean: true, // 每次打包会清除之前的代码 
  }
}

module.exports = merge(commonConfig, prodConfig)

3、配置src 下的 App.vue 文件

<template>
  <div>hello word</div>
</template>

<script>
export default {};
</script>

<style>
div {
  color: pink;
}
</style>

4、配置 src 下的main.js 文件

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

5、在package.json脚本中区分不同环境的启动命令

此时我们的package.json 文件中scripts配置项中应该是这样的

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config config/webpack.prod.js",
    "dev": "webpack serve --config config/webpack.dev.js"
  },

四、启动项目

配置正确的话应该是图下所示

1、当我们执行 npm run dev时

命令执行完毕后，我们可以通过上图箭头所指的位置访问我们的项目,会发现页面上展示一个粉红色的hello word。那么表示我们配置的开发环境没有问题。

2、当我们执行 npm run bulid 时

控制台没有报错，在我们的config 文件夹下面，会多出一个dist文件夹，下面存放我们打包好的html和js文件，运行dist文件夹下的html文件，发现页面上也是一个粉红色的hello word，那么表示我们配置的生产环境的打包也没有问题。

五、定义全局变量

六、安装各种工具

1、使用less和less的解析器

npm install less less-loader

在webpack.common.js文件中 在module下的 rules添加解析less的规则
   { // 设置less的解析规则
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' }
        ]
      }

然后修改我们的App.vue 文件

此时 运行 npm run dev 我们在app.vue 文件中书写的样式在 页面上是这样的

2、安装 element-puls 组件库

npm install element-plus --save

因为我们这里是 demo 搭建练习所以 直接完整引入

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

到这里我们的less 配置已经完成了，还有 图片的配置以及其他的一些配置等等这里就不展开了。

六、配置跨域

1、定义全局变量

我们通常会有个配置文件，需要根据环境的不同，配置不同的接口地址，这时一般就会用到全局变量，webpack可以使用DefinePlugin插件来设置全局变量

为了写一个脚本配置，适配所有电脑，所以要安装cross-env解决跨平台问题：
npm i cross-env -D，这样，就可以只使用一个脚本：

然后在webpack.common.js中，打印process.env.NODE_ENV可以获取到脚本中的设置值，注意，这个process.env只有在配置文件中才能获取到，在其它index.js中是获取不到的，除非设置了全局变量

 plugins: [
 	   new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
 ]
// 还需要在plugins 的同级别下 添加一个配置项
 optimization: {
    nodeEnv: false  //不让webpack自动读取配置文件中的modu给process.env.NODE_ENV 赋值
  },

在webpack4之后，上面这些操作，webpack都帮我们内置了，所以可以在任何js文件中都能获取到process.env.NODE_ENV的值，这个值对应的是webpack配置文件中的mode值，即development或production

这里主要是说明怎么接收命令行的参数，并在DefinePlugin设置全局变量的方法，方便我们在模块中使用，但注意的是，设置的对象需要使用JSON.stringify转换，包括字符串（否则字符串会被识别成变量而报错）

2、配置webpack.dev.js 文件以及写一个简单node接口

// webpack.dev.js
const path = require('path')
const commonConfig = require('./webpack.common')
const { merge } = require('webpack-merge')
const devConfig = {
  mode: 'development', // 开发环境
  output: {
    filename: 'bundle.js',  // 输出文件名
    path: path.join(__dirname, '..', 'dist')  // 输出目录
  },
  devServer: {
    // 设置代理
    proxy: {
      '/dev': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        pathRewrite: {
          '^/dev': ''
        }
      }
    }
  }
}
module.exports = merge(commonConfig, devConfig)

配置跨域我们以及配置好了，那么怎么测试呢，我们来简单写个node接口来试试
1、创建一个空文件夹，执行 npm init -y 生成package.json文件
2、安装 npm install express
3、创建server.js 文件 ，代码如下

// 引入express
const express = require('express')
//创建一个app实例对象
const app = express()

//配置后端路由
//req 就是 request，就是请求过来的数据。
//res 就是 response，就是回调信息，要响应回去的数据。
app.get('/obj',(req,res)=>{
    res.send({
        name:'杰克',
        age:20
    })
})

app.on('request',function(req,res){
res.end('hello nodejs')
})

// listen()端口监听
app.listen(5000,(err)=>{
    if(!err){
        console.log('服务器启动成功了')
    }
})

然后执行 node serve.js 会看到下面出现服务器启动成功，那么我们去浏览器访问http://localhost:5000/obj 那么页面中会出现我们刚才所写的一个简单的返回数据。

3、 安装 axios 发送请求 和 nprogress 进度条样式

npm install axios
npm install nprogress

在src 目录下新建 api 文件夹 创建 api.js 和 require.js 对axios 进行二次封装

require.js 文件如下

import axios from 'axios'
/* 
引入进度条
引入进度条样式
*/
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

const service = axios.create({
  baseURL: process.env.NODE_ENV, // 基础路径
  timeout: 5000, // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use((config) => {
  // 进度条开始   
  Nprogress.start()
  return config
}, (error) => {
  // 请求失败的返回
  return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use((response) => {
  // 进度条结束  
  Nprogress.done()
  // 响应成功的返回
  return response
}, error => {

  // 进度条结束  
  Nprogress.done()
  return Promise.reject(error)
})

// 导出axios实例
export default service

api.js 文件如下

import service from './require'

export const ceshix = () => {
  return service({
    url: '/obj',
    method: 'get'
  })
}

axios 一个简单的二次封装就已经完成了，现在回到我们的app.vue文件中测试跨域配置以及发送请求是否能成功。

app.vue 文件如下

执行 npm run dev 打开页面

当我们点击按钮时，打开 浏览器的控制台 f12 或者 鼠标右击页面 点击检查 打开network 可以看到我们的请求是能够成功发送 ，拿到返回的数据的。

七、写在最后

最后我们整个项目的文件夹是这样的。

1. api目录下存放的是 对axios 二次封装 以及写接口请求的文件夹
2. assets 目录下 是存放图片资源的
3. components 目录下 是存放公共组件的
4. mock 目录下 是我们用来写mock 假数据的
5. router 目录下 是我们用来写 vue中的路由的
6. store 目录下 是我们用来写vue中的 vuex 状态管理的
7. styles 目录下 是我们用来存放公共样式的
8. utlis 目录下 是我们用来写公共的一些方法的
9. views 目录下 是我们用来开发各自页面模块的

• 首先还是很感谢大家看到这里😄，，一个最简化的Vue3+webpack5运行环境就完成了，后续可以根据自己需要配置相关框架和插件，希望搭建的这个demo可以帮到大家，这次的文章就分享到这里，上述文件夹中还未讲到的留到下篇文章进行介绍。
• 最后， 文章有写的不好的地方，欢迎大家给与指点，谢谢大家。