Vue全家桶系列之Vue-cli(三)_vue-loader.conf.js-优快云博客

本文链接：https://blog.youkuaiyun.com/ws9029/article/details/119961190

本文深入探讨了webpack配置，包括webpack-dev-server的作用，以及如何通过package.json中的脚本启动和构建项目。重点分析了webpack的开发环境和生产环境配置文件，如webpack.base.conf.js、webpack.dev.conf.js和webpack.prod.conf.js，以及config文件夹中的环境变量配置。同时提到了vue-loader和utils.js在配置中的应用。最后，文章预告下篇将讨论vue-router。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- - 1.前言
  - 2.webpack配置

1.前言

上一篇文章对整个项目的目录结构进行了讲解，那么这篇文章我们来说下webpack配置相关的文件，webpack是当前最流行的构建工具，所以有必要对它进行了解！

2.webpack配置

我们先 npm run dev启动项目,再打开浏览器,F12来看下请求的文件，这里面请求了一个app.js文件，但是查看下index.html模版里面并没有这个文件！其实都是webpack的功能，它会把app.js文件自动的插入到index.html模版里面
在这里插入图片描述
接下来我们主要来分析下webpack配置，它的配置主要在build,还有config文件夹里面，这么多js文件，那么就要从入口文件看，找到package.json文件,里面有个script,里面是我们定义的一些脚本！并且可以借助npm script来执行命令脚本！

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

先说下webpack-dev-server，webpack-dev-server是一个本地开发工具，启动一个本地的服务器，可以用来处理打包资源和静态文件的请求，并且会将打包结果放在内存中，在每次webpack-dev-server接受到请求时都只是将内存的中的打包返回给浏览器（你可以通过删除工程中的dist目录来验证，你会发现即使dist目录不存在，刷新页面功能仍然可以正常运行），还有它的live-reloading功能（自动刷新）可以监听文件的变化，自动刷新页面来提升开发效率的，所以webpack-dev-server一般在本地开发才会用到！

再来看"dev"和"start",那么 npm run dev 和npm run start 都是用webpack-dev-server去执行build下面的webpack.dev.conf.js配置，这个是开发环境的配置,"build"就是生产环境的配置了，所以npm run build就是node去执行 build文件下的build.js文件了，再分别来看下build和config下的文件
在这里插入图片描述
先来看下build文件夹的文件，看下面：

1. build.js是构建开发的环境的脚本文件，npm run build所执行的脚本。
2. check-versions.js是检查npm和node的版本的脚本文件。
3. utils.js是用于一些工具方法（生成路径的地址），主要用于生成cssLoader和styleLoader配置的脚本。
4. vue-loader.conf.js是vue-loader的一些基本配置，里面用到utils.js的一些方法。
5. weback.base.conf.js是dev和prod环境下的基本配置。
6. weboack.dev.conf.js是dev环境的配置。
7. weboack.prod.conf.js是prod环境的配置。
在这里插入图片描述

再开来看下config文件夹的文件，看下面：

1. dev.env.js是dev环境变量配置。
2. index.js是dev和prod环境的一些基本属性配置（我们可以根据自己的需要来更改这些配置）。
3. prod.env.js 是prod环境变量配置。

我们下面来一个一个来详细讲解这些文件,先来看check-versions.js,主要是检查npm和node的版本的！
![(https://img-blog.csdnimg.cn/d5331c765a744e66b3bc79f42e29826f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiW5oCB54KO5YeJ77yB77yB,size_20,color_FFFFFF,t_70,g_se,x_16)
再来看下config下的index.js,主要是dev和prod环境的一些基本属性配置（我们可以根据自己的需要来更改这些配置），webpack.dev.conf.js和webpack.prod.conf.js都会用到这个文件的一些基本属性配置！
在这里插入图片描述
prod.env.js是prod环境变量配置，就是一个对象，webpack.prod.conf.js也会用到这个文件的变量！

dev.env.js是dev环境变量配置，其实也是一个对象，只不过prod环境是"production"，dev环境是"development"，webpack.dev.conf.js会用到这个文件的变量！
在这里插入图片描述
webpack.base.conf.js是prod和dev的公用配置！最终生成完整的配置都要加上它！

webpack.base.conf.js用到utils.js和vue-loader.conf.js，并且vue-loader.conf.js也用到utils.js的方法，先来看下utils.js，它有生成路径的方法和用于生成cssLoader和styleLoader配置的方法！
在这里插入图片描述
vue-loader.conf.js是vue-loader的一些基本配置！

webpack.dev.conf.js是dev环境的配置！