文章目录
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的版本的!
再来看下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环境的配置!
webpack.prod.conf是prod环境的配置!
最后一个是build.js文件,这个是建构开发环境的文件!
终于整理完了!我们下篇来说下vue全家桶的vue-router!如果觉得写的可以,点个关注!谢谢!