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：这个文件是在开发环境下独有的配置。里面一般有启动一个webpa