手动搭建webpack4.x+vue2.x 基础结构

近几年，web前端发展越来越蓬勃，技术也在日新月异。框架和构建工具也层出不穷。前段时间，我所在的公司要求开发app，基于vue+apicloud框架和工具。
由于时间因素，vue环境的搭建是基于wepack提供的vue-cli 脚手架，同时我从来没有接触过构建工具，直到app开发完成上架，都是一步一步慢慢摸索。目前抽空自己学习搭建webpack4.x+vue2.x 基础结构，现在分享一下我的学习过程：
webpack首先是个模块打包工具，会将我们的资源文件模块化打包成我们需要的文件。废话不多说，我们开始吧。
第一步，初始化我们的项目。
进入cmd 在我们项目空文件夹里 npm init，完成之后文件夹中会出现一个 package.json，先放着。
第二步，安装我们需要的webpack工具模块。
全局安装webpack模块 npm install webpack -g；
注意webpack4.x需要安装webpack-cli,不安装，运行的时候也会提示你安装的。
npm install webpack-cli -g；
安装完，我们测试一下。随便建立一个test.js，运行 webpack test.js -o test2.js，test2.js生成成功，则说明我们webpack安装完成。
第三步，在我们文件夹中建立一个webpack.config.js。这个js是weback运行时默认的开始文件，就像gulp中的gulpfile.js一样。
第四步，建立我们的项目目录，首先我们建立src 文件夹，这里我们开发文件夹，我们开发时所有代码都将在src文件夹中完成。src里面我们再建index.js入口文件，assets资源文件夹，pages文件夹等等，按自己项目实际需要建立。
第五步，我们编写我们的webpack.config.js配置文件。

在webpack 官网，可以看到大概分为这几个部分
module.exports ={
entry:{},
output:{},
module:{},
plugins:[]
}
我们这里需要编写这几个内容：入口文件，输出文件，文件处理模块以及插件。
下面贴出webpack.config.js，内容：



这里有几个注意的地方：
resolve: {
alias: {
’vue’: ‘vue/dist/vue.esm.js’,
‘@’:path.resolve(__dirname,“src”)
}
},
如果你不给vue重命位置，他将引用的是vue.runtime.js 这个js文件，这个文件是无法将.vue编译的。
还有css中路径的问题：


由于我的编译出来的css 都在dist/css文件下，如果我不加上资源基础路径，像图片和字体之类的路径，就会在css/相对路径下。
最后我们修改package.json文件。

我们在控制台运行：npm run build 就完成了。
写的相当粗糙，有些模块，需要自己去看api介绍和下载。
附上包版本：