webpack4+vue2手动搭建前端开发框架

1.前言

之前开发一直是在公司搭好的框架里面，或者是vue@cli脚手架的开箱即用，项目在遇到问题后排查也会花大量时间，所以索性自己研究手动搭建一个，也熟悉一下里面的原理。
搭建这个是在windows环境下，mac大同小异，实现的基本功能有：

• 支持热更新
• 支持vue全家桶+scss开发
• 编译后文件命名规则

js/[name]-[hash:8].js    
css/[name]-[hash:8].css

• 支持生产环境的图片压缩
• 支持打包后的压缩JS代码
• 支持dist文件自动压缩

2.安装node

上node官网直接下载最新版，下载完成按默认路径安装。安装成功后在cmd命令框输入 node -v查看是否成功。

3.项目初始化

cmd命令框执行npm init（也可以执行npm init -y,会跳过一些默认项），执行成功后会在当前文件夹默认创建package.json文件

4.安装webpack

$ npm install webpack --save-de

安装成功后默认会有node_modules、package-lock.json文件出现

5.安装vue全家桶及所需插件

因为这些插件都是通过npm逐一安装的，这里就直接贴出package.json,
直接执行npm install安装即可，另外因网络而异，有时npm安装会失败，遇到这种情况不要用该文件的内容，先安装cnpm，然后把需要插件的相关内容加到package.json文件，cnpm install即可。
参数说明

{
  "name": "henry-test",
  "version": "1.0.0",
  "description": "test-project",
  "main": "src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline --progress --config webpack.base.config.js",
    "build": "webpack -p --config webpack.prod.config.js"
  },
  "keywords": [],
  "author": "henry",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env"