vue-webpack项目配置以及打包流程详解

我认为如果你要用webpack打包项目，首先你需要有一个思维的转化，传统来说前端项目都是从html文件为入口开始运行项目，但是你使用了webpack后就不能这么想了。webpack是依赖于node环境的，node是基于commonjs模块规范以及javaScript的后台编程框架，而前端html依赖的是浏览器环境，你看这个环境都变了，如果你以浏览器环境的思考方式来读懂webpack打包，是不是势必会出现很多相左之处呢？所以拥有一个node基础以及webpack基本知识很重要，但更重要的是需要node思维也可以说是后端思维去看webpack打包，今天我从vue官方推荐的webpack工程化项目来解析项目配置以及流程，我会尽全力详细全面的解析出来，希望对大家有帮助，有不对的地方也希望大家能多多指教。

1.启动

开始启动项目，进入项目目录同时在终端输入npm run dev,

这串脚本会有什么作用呢？npm是node的包管理工具，这串脚本执行的具体操作会在package.json的scripts配置项里有解释。

如图示npm run dev 相当于直接在终端执行webpack-dev-server --inline --progress --config build/webpack.dev.conf.js，这段代码的意思就是启动一个webpack服务器，同时指定打包配置的文件build/webpack.dev.conf.js.这里有同学就有疑问了，为什么需要指定打包配置文件呢？官方默认不是webpack.config.js文件吗？其实是因为不同的环境决定的，对应什么环境你需要不同的配置文件，比如说我需要上线项目，这时我就需要配置一个production环境的配置，执行npm run build。

上图，我们经常在一些项目里看见有很多这样的配置文件，在这里我做一个详细的解释。

webpack.base.conf.js:这个配置是最基本的，也就是说不管是开发生产或者测试环境下都需要的配置，比如说解析css，打包图片等等。

webpack.dev.conf.js：这个文件是在开发环境下独有的配置。里面一般有启动一个webpack服务器做热更新，监听文件的改变，自动刷新等等，这些配置有利于开发过程的操作。

webpack.prod.conf.js:生产环境的配置，（正式环境会做一些压缩/分包/提取公共文件的操作，简单来说就是更全面，代码更优化）

webpack.test.conf.js: 测试环境的配置，（有利于测试环境的包，根据具体的需求来配置）

除了以上几个配置文件外大家还会经常看见

webpack.ssr.js: 服务器渲染的文件

webpack.dll.js：（预编译资源模块，对基础组件或者框架进行分包，有利于提升打包速度）

2.webpack.base.conf.js

打开此配置文件，我们一步步的分析。

首先看见的是require()，不知道此时会不会觉得有疑问呢？之前我们说了webpack是基于node环境，node其中一个非常重要的概念就是commonjs模块化管理工具。node支持module，global，require()这三个全局变量，只要你的项目有package.json文件就说明你的项目是一个node包，你就可以任意使用这三个全局变量。所以在这里看见require也就不稀奇了。在node中，所有的js文件都会被单独看成一个模块，可以通过这种方式被引用。我们来看第一行const utils = require('./utils’)，这里引用的是utils.js。common.js默认省略后缀.js。在这里有一个疑问有些模块的引入是相对路径有的就只是一个模块名。其实这跟common.js的模块引入相关，只有一个模块名的是内置模块，require将直接返回模块。如果模块是以”./”、“/”、“../”会在项目里面去查找js文件。具体的可以点击以下链接（http://www.w3cbus.com/nodejs/module.html）。

2.1进入webpack.base.conf.js，基本配置文件。

以上是文件较重要的几个部分，我稍微做一下解析，我们可以看见webpack的入口文件是main.js。webpack的入口只能是一个js文件，因为webpack只认识js与json文件。一个项目最重要的就是入口，没有入口就算你的项目再牛*，也不可能运行。这里我对浏览器入口与webpack打包入口做一个解析，防止大家晕😷。浏览器环境下入口是index.html文件，但是在webpack环境下我们的入口‘变了’，为什么这里要加一个引号呢？因为这个变并不是真正的变化。你要记住的是浏览器环境下的入口永远只能是html文件。这里的入口指的是webpack打包入口。最后在浏览器运行时的入口还是html文件，html会把打包出来的js文件通过script标签引入(后面看运行结果的源代码)。由于webpack只认识js与json文件，其他文件需要通过loader转化成webpack认识的文件。其实loader的本质就是一个函数。由于此项目是vue官方推荐的初始化项目，里面涉及到的文件较少所以loader较少，一般还需要css-loader,less-loader,raw-loader等等。

（此文件中很多语法大家可能会觉得莫名其妙，大家看webpack官网就能找到源头，不要头大哟！慢慢看你的努力是会得到回报的https://www.webpackjs.com/concepts/，官网）

2.2插件。

回到webpack.dev.conf.js，这一节来说一下插件配置，其实可以把插件理解成loader不能完成的都交给插件完成。以下是配置文件中使用的插件

除了以上几个插件平时我们还会使用

UglifywebpackPlugin压缩js

SplitChunkPlugin进行公共脚本分离

ZipWebpackPlugin:将打包出的资源生成一个zip包

ExtractTextWebpackPlugin:将css从bundle.js中单独提取成一个css文件等等。

一般这几种插件打正式包会用上。

2.3文件中的dev-server说明

热更新，其实使用的是webpack内置的插件webpack-dev-server(WDS).一般是在开发环境下使用，增加开发效率。在开发过程中当我们修改文件后需要手动的刷新浏览器，很不方便。你可以webpack-dev-server 后面加上—open参数，每当启动服务器会自动打开浏览器而且有修改时浏览器自动刷新，这样大大的提高了开发效率。WDS还有一个比较大的优势输出的文件存在内存，没有磁盘的I/O，所以说构建速度有一个大大的提升。详细的配置说明打开可以在webpack官网上去了解，后期我会对WDS的原理做一个细致的解析。

2.4

__dirname: node的全局变量，表示当前文件所在的目录名，是绝对路径。这个函数是去获取绝对路径。文件多处需要使用到。

2.5打包出口output

在基本配置文件中我们可以看到有一个output出口配置，而且出口配置跟入口配置不一样。

filename:’[name].js’,filename表示输出的文件名，[name]这称作为文件指纹，如何来理解呢？就是给打包的文件一个标识。举个例子，search.js打包出来的文件是search.js,index.js就是index.js文件不会混。一般还会加上[hash],比如说[name]_[hash].js.官网还有很多类型的文件指纹，大家有兴趣可以多了解了解。

path:输出地址，也就是说打包结束的文件放在哪里。config.build.assetsRoot,来找一一下

在这里，文件最后会输出到根目录的dist目录下面。那接下来我们就来看看输出的文件吧！

以上是对开发环境的webpack配置做一个梳理，并不是一字一句来说明的，如果大家有不懂的可以在下方留言，我们一起探究探究。

3.webpack.prod.conf.js

生产环境文件中我们会看见也有配置output，这时有人会想webpack.base.conf.js不是已经配置了吗？那这两者会不会有影响呢？这是出现了一个秘密武器，那就是webpack-merge插件，作用是组合配置。

仔细阅读上图你就知道了，prod的output会覆盖base的output。

4.打包

如果我们想看文件打包后的效果，首先我们应将package.json中的dev配置修改为

保存，我们来运行npm run dev

如果出现以上的页面就说明你打包成功了，此时我们可以看到项目目录中多了一个文件夹dist,打开dist文件夹我们可以看见正是我们刚刚打包好的两个文件。

4.1 index.html文件

引入了打包好的app.js文件。

我们用浏览器打开index.html。什么都没有显示，查看开发者工具的network,

app.js引入失败，引入路径问题，

将“/”去掉，重新刷新网页。

内容就出来，成功。

以上就是我对vue官方给出的依赖webpack构建的工程化项目的一个启动解析，以及对配置文件做的解析，后续我会就webpack的优化/原理/打包/流程写一些文章。希望大家有所收获，最后希望能跟大家能天天开心。