# vue-base-code

**Repository Path**: zmy0815/vue-base-code

## Basic Information

- **Project Name**: vue-base-code
- **Description**: 学习使用webpack打包vue项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-11
- **Last Updated**: 2021-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目说明
### 整体思路 
使用webpack打包vue项目，并且手动集成eslint 校验代码。整体思路：首先需要下载相应的插件和依赖，webpack 和webpack cli 核心逻辑。然后根据文件打包类型设置对应的loader实现各种各样资源模块的加载 实现整体项目的打包。然后完善项目体验，利用plugin实现了前端工程化的工作。解决除了资源其他自动化工作。
### 实现的功能简介
- 与vue/cli类似的基本目录
- 支持*.vue,*.css .less等文件
- 支持es6及以上语法
- 支持加载图片
- 热加载
### 具体步骤
1. 先看整体项目是vue项目，有src/public目录，webpack打包入口文件为跟目录的main.js文件，输出的html模板为public/index.html 文件，编写webpack的打包文件。
2. 为vue文件先安装解析vue的vue-loader，并且安装对应的plugin,VueLoaderPlugin。
3. 项目中还有less 和css的loader一起安装。css-loader style-loader less-loader 有图片安装对应的url-loader/file-loader,并且加上exclude不解析node_modules文件。
4. 解析各种资源的loader安装完成后，开始安装对应的plugins，先配置copy-webpack-plugin and clean-webpack-plugin。copy那些不需要解析的public文件夹和每次打包前清除dist包。
5. 配置html-webpack-plugin 以public/index.html为模板，生成的文件名称。package.json scripts里面配置build 打包到dist目录"build": "webpack --config webpack.common.js",。运行yarn build 就会发现dist打包成功。
6. 开启热加载 webpack 热加载需要用到webpack-dev-server.先下载，然后在webpack.config.js中配置 devServer参数，配置好了就可以使用热启动了。
7. eslint配置，需要先下载eslint eslint-loader 然后初始化eslint 配置，yarn eslint --init 初始化.eslintrc.js。然后在webpack.common.js里面配置eslint-loader。
8. 最后就是项目优化不用环境的配置文件，两个代表不同环境的，一个是公共的配置 因为一般我们的生产环境和开发环境不会所有的都不同，所以我们需要一个公共的文件开抽取他们的共同点。用到插件webpack-marge 然后在dev配置中eslint校验等，而prod 线上环境用到CleanWebpackPlugin,其他相同配置在common.js里面。

### webpack以及用到的webpack插件
- webpack webpack-cli
- webpack-dev-server
- html-webpack-plugin
- vue-template-compiler
- css-loader less-loader style-loader vue-style-loader
- file-loader url-loader
- bable-loader @babel/core  @babel/preset-env 
- webpack-merge
- eslint-loader

#### 小总结 
其实过程中解决了很多bug,这里就不一一细说了，有bug要学着利用工具自己解决。奥里给。^ ^