### git
* 最常用的代码版本管理工具
* 常用 git 命令
* git add .
* git checkout xxx
* git commit -m "xxx"
* git push origin master
* git pull origin master
### webpack 和 babel
#### 为什么需要
* ES6 模块化，浏览器暂不支持
* ES6 语法，浏览器并不完全支持
* 压缩代码，整合代码，让网页加载更快
#### webpack 配置
> 注意版本问题：最新版本的需要配置一些其他项
>
> 所以我的是指定版本安装：和视频演示的版本一致
>
> `npm install webpack@4.41.0 webpack-cli@3.3.9 webpack-dev-server@3.8.2 html-webpack-plugin@3.2.0 -D`
* 初始化：`npm init -y` --> 生成 package.json 文件
* 安装 webpack 依赖：`npm install webpack webpack-cli -D` -D 选项为开发依赖
* webpack.config.js 文件基本配置
* ```javascript
const path = require('path')
module.exports = {
mode: 'development', // production development
entry: path.join(__dirname, 'src', 'index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
}
```
* Ïpachage.json scripts 配置：`"build": "webpack"` 打包命令
* 扩展 html 打包； 安装插件
* `npm i html-webpack-plugin -D`
* `npm i webpack-dev-server -D `
* webpack.config.js 配置
* ```javascript
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // production development
entry: path.join(__dirname, 'src', 'index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html', // 打包后的 dist 下的文件名
}),
],
devServer: {
port: 3000,
contentBase: path.join(__dirname, 'dist'),
},
}
```
* package.json 配置
* ```javascript
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack [--config webpack.config.js]",
"test": "echo \"Error: no test specified\" && exit 1"
},
```
* `npm run dev` 执行本地运行
##### babel 配置、转义为 ES5
* `npm i @babel/core @babel/preset-env babel-loader -D`
* `.babelrc` 文件配置
* ```javascript
{
"presets": ["@babel/preset-env"]
}
```
* webpack.config.js 配置
* ```javascript
module: {
rules: [
{
test: /\.js$/, // 符合此正则的走 babel-loader 插件
loader: ['babel-loader'],
include: path.join(__dirname, 'src'), // 此目录下的走 babel-loader 插件
exclude: /node_modules/, // 排除此目录
},
],
},
```
##### ES6 模块化
* 第一种方式
```javascript
// a.js 导出多个
export function fn() {
console.log('fn')
}
export const name = 'a'
export const obj = {
name: 'zhangsan',
}
// index.js 导入，需要解构
import { fn, name, obj } from './a'
fn() // 正常使用
console.log(name,obj)
```
* 第二种方式
```javascript
// 导出一个
const obj = {
name:'xxx'
}
export default obj
// 导入，不需要解构
import obj from './c'
```
##### 生产环境配置
* webpack.prod.js
* package.json scripts `"build": "webpack --config webpack.prod.js",`
* ```javascript
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'production', // production development
entry: path.join(__dirname, 'src', 'index.js'),
output: {
filename: 'bundle.[contenthash].js',// contenthash 根据代码内容计算出的哈希值
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/, // 符合此正则的走 babel-loader 插件
loader: ['babel-loader'],
include: path.join(__dirname, 'src'), // 此目录下的走 babel-loader 插件
exclude: /node_modules/, // 排除此目录
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html', // 打包后的 dist 下的文件名
}),
],
}
```
完整 webpack demo [gitee仓库](https://gitee.com/yishen_yishen/webpack-demo)
