### 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)
