vue-cli 脚手架中 webpack 配置基础文件详解

作者：切图妞

segmentfault.com/a/1190000014804826

一、前言

vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。

二、主体结构

1、package.json

项目作为一个大家庭，每个文件都各司其职。package.json来制定名单，需要哪些npm包来参与到项目中来，npm install命令根据这个配置文件增减来管理本地的安装包。

注释：

①、点这里→webpack运行时的配置文档传送门

②、devDependencies和dependencies的区别： devDependencies里面的插件只用于开发环境，不用于生产环境，即辅助作用，打包的时候需要，打包完成就不需要了。而dependencies是需要发布到生产环境的，自始至终都在。比如wepack等只是在开发中使用的包就写入到devDependencies，而像vue这种项目全程依赖的包要写入到devDependencies。

点这里→更多安装包文档搜索页传送门

③、file-loader和url-loader的区别：以图片为例，file-loader可对图片进行压缩，但是还是通过文件路径进行引入，当http请求增多时会降低页面性能，而url-loader通过设定limit参数，小于limit字节的图片会被转成base64的文件，大于limit字节的将进行图片压缩的操作。总而言之，url-loader是file-loader的上层封装。

点这里→file-loader 和 url-loader详解

点这里→file-loader文档传送门

点这里→url-loader文档传送门

2、.postcssrc.js

注释：

①、点这里→postcss-import文档传送门

②、点这里→postcss-url文档传送门

③、点这里→autoprefixer文档传送门

3、.babelrc

该文件是es6解析的一个配置。

注释：

点这里→transform-vue-jsx文档传送门

点这里→transform-runtime文档传送门

4、src内文件

我们开发的代码都存放在src目录下，根据需要我们通常会再建一些文件夹。比如pages的文件夹，用来存放页面让components文件夹专门做好组件的工作；api文件夹，来封装请求的参数和方法；store文件夹，使用vuex来作为vue的状态管理工具，我也常叫它作前端的数据库等。

①、assets文件：脚手架自动回放入一个图片在里面作为初始页面的logo。平常我们使用的时候会在里面建立js，css，img，fonts等文件夹，作为静态资源调用

②、components文件夹：用来存放组件，合理地使用组件可以高效地实现复用等功能，从而更好地开发项目。一般情况下比如创建头部组件的时候，我们会新建一个header的文件夹，然后再新建一个header.vue的文件夹

③、router文件夹：该文件夹下有一个叫index.js文件，用于实现页面的路由跳转，具体使用请点击→vue-router传送门

④、App.vue：作为我们的主组件，可通过使用开放入口让其他的页面组件得以显示。

⑤、main.js：作为我们的入口文件，主要作用是初始化vue实例并使用需要的插件，小型项目省略router时可放在该处

注释：具体vue的用法可查看vue官方中文文档传送门

5、其他文件

①、.editorconfig：编辑器的配置文件

②、.gitignore：忽略git提交的一个文件，配置之后提交时将不会加载忽略的文件

③、index.html：页面入口，经过编译之后的代码将插入到这来。

⑤、README.md：可此填写项目介绍

⑥、node_modules：根据package.json安装时候生成的的依赖（安装包）

三、config文件夹

config内的文件其实是服务于build的，大部分是定义一个变量export出去。

注释：点这里→webpack-merge文档传送门

3、config/index.js

注释：点击→devtool文档传送门

四、build文件夹

1、build/build.js

该文件作用，即构建生产版本。package.json中的scripts的build就是node build/build.js，输入命令行npm run build对该文件进行编译生成生产环境的代码。

注释：

①、点这里→ora文档传送门

②、点这里→chalk文档传送门

③、点这里→rimraf文档传送门

2、build/check-version.js

该文件用于检测node和npm的版本，实现版本依赖

注释：

点这里→chalk文档传送门

点这里→semver文档传送门

3、build/utils.js

utils是工具的意思，是一个用来处理css的文件。

注释：

path.posix：提供对路径方法的POSIX（可移植性操作系统接口）特定实现的访问，即可跨平台，区别于win32。

path.join：用于连接路径，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是"\"

点击→path用法传送门

该文件的主要作用就是处理.vue文件，解析这个文件中的每个语言块（template、script、style),转换成js可用的js模块。

注释：

①、点击→vue-loader文档传送门

②、点击→babel-loader文档传送门

注释：

①、点击→friendly-errors-webpack-plugin文档传送门

②、点击→process文档传送门

③、点击→babel-loader文档传送门

④、点击→devtool文档传送门

⑤、点击→webpack的HotModuleReplacementPlugin文档传送门

⑥、点击→html-webpack-plugin文档传送门

五、结语

第一篇博文总在想要写点什么，就根据自己的经验加查了下文档写了这么一篇工具类的文章，由于有些插件有些用法会重复，所以按照文章先后写过用法给过链接的插件一般在后面就省略了，有时间的建议从头开始，如果单独看某章节的话遇到不懂的语法或插件可全文查找，也可以点击更多安装包传送门(https://www.npmjs.com/)进行查找阅读。本文将vue本身自带的英文注释删除了，但英文注释非常有用可以仔细阅读，希望对大家学习vue和webpack都有所帮助。

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能