webpack4-vue

webpack4 + Vue2全家桶(vue-router、vuex、vue-i18n)配合axios请求插件搭建的多页面或单页面应用 PC端用的element-ui2

一、 安装

1.安装node

本地电脑中安装nodejs，因为webpack4不再支持node 4，可以直接升级到8.x以上版本，也是为了更好的支持es6语法， 我的node版本为v9.8.0，请下载node进行安装，如果node版本不一致，可能会需要重新安装node-sass，命令为npm i node-sass -S --legacy-bundling。

2.安装依赖包

下载当前工程，cmd打开到当前目录下，输入npm install安装package.json中的依赖(注意npm3.x或以上的版本安装包是平行依赖安装的，如果不想平行安装可以输入npm install --legacy-bundling，但是需要npm为3.x版本，可npm降版本至3.x。)

3.输入命令

下载依赖后，在cmd中(当前目录下)输入npm run dev命令，当前命令表示开发模式下打包编译并且是实时的，生产模式打包命令npm run build，在package.json中scripts有相关命令。

4.打开首页

编译完成后浏览器会自动打开当前开发地址，可以看到首页内容

二、目录

1.build文件夹

build文件夹下是webpack4相关的配置内容。

2.src文件夹

src文件夹是开发目录，里面分为：
app文件夹的入口文件(可放置html和对应的主入口文件)
assets资源文件夹，可放置图片、js、css、font等文件
components文件夹，可放置公共vue组件
i18n文件夹为国际化文件内容，可配置前端的国际化语言
pages文件夹放置对应主页面的vue文件页面，并配合router文件生成路由
router文件夹配置路由
static文件夹放置静态文件
store文件夹放置vuex配置内容

3.eslintrc.js

.eslintrc.js为配置eslint内容，默认在config.js中开启eslint验证

4.config.js

config.js为配置暴露出来的api内容，可以配置开发模式下的端口号、反向代理、入口文件，还有相关webpack配置选项，并且有对应的注解

5.package.json

相关依赖安装，和启动编译命令

三、打包

1.打包公共文件：

打包公共文件使用DllPlugin插件，在config.js中可配置打包公共文件选项，相应命令为npm run dll-dev（开发模式）、npm run dll-build（生产模式），也可直接运行npm run dev，但每次都会重新打包dll，打包完成后会在src\static\vendor下生成vendorJS公共文件，提升编译速度。

2.fundebug文件打包：

相应命令为npm run fundebug
生成模式下devtool为'hidden-source-map'，因为代码为压缩，debug看不出原始代码结构，而且'hidden-source-map'生成的map文件不会在相对应的js底部注释链接，所以想再生产模式下查看原始代码需使用fundebug这类监控平台。
需要在官网(https://www.fundebug.com/)注册生成apikey，在config.js中配置当前的apikey，再把生产模式下生成的map文件上传到官网中，报错就可以看到报错处对应的原始代码了(要想一直使用官网的Source Map支持功能需要花钱...)。

3.打包命令

npm run server命令为开发模式，直接运行编译。

npm run prod命令为生产模式，直接运行编译。

npm run dll-dev命令为开发模式下的打包公共文件，该文件不会被压缩且是开发模式，vue库提示报错信息明确友好，生成目录为src\static\vendor\vendor.js。

npm run dll-build命令为生产模式下打包公共文件，该文件会被压缩且是生产模式，生成目录为src\static\vendor\vendor.js。

npm run fundebug命令为打包fundebug文件，生成目录为src\static\fundebug\fundebug.js。

npm run dev命令为开发模式，该命令会先打包开发模式下的公共文件后再正常编译，每次修改代码都会自动编译并自动刷新页面，打包的内容都在内存之中，目录中是看不到的，基于webpack-dev-server插件的，还可以在config.j里配置反向代理(跨域请求ajax)、开发地址等。

npm run build命令为生产模式，该命令会先打包生产模式下的公共文件和fundebug后再正常编译，打包完成后会在目录中生成dist文件夹，该文件夹内容都是压缩版的，可以放到服务器中。

四、相关技术文档

webpack4参考网站： http://webpack.css88.com/

Vue官网： https://cn.vuejs.org/

vue-router： https://router.vuejs.org/zh-cn/

vuex： https://vuex.vuejs.org/zh-cn/

vue-i18n： https://kazupon.github.io/vue-i18n/en/

element-ui： http://element-cn.eleme.io/#/zh-CN

vux： https://vux.li/

es6入门教程： http://es6.ruanyifeng.com/

scss中文教程： https://www.sass.hk/guide/