git:
1、git 安装：
2、git config --global user.name "xxx"
3、git config --global user.email "邮箱"
4、生成密钥：ssh-keygen -t rsa -C "邮箱"
1：安装node.js
2：切换镜像仓库地址：npm install cnpm -g --registry=https://registry.npm.taobao.org
3：安装脚手架：cnpm install -g @vue/cli
运行本地webpack dist包：
1：全局安装serve这个服务，npm install -g serve
2：cmd 到dist目录下运行命令：serve
一、webpack基本配置：
查看 xxx的历史版本：npm info xxx versions
查看webpack的版本命令： npm info webpack versions
查看node-sass的版本命令npm info node-sass versions
1、初始化 npm
npm init -y
2、本地安装webpack、webpack-cli(npm 命令行工具)
npm install webpack@version webpack-cli@version
npm install webpack@4.41.2 webpack-cli@3.3.10 -D
3、 打包index.js
npx webpack index.js
4、在index.html中引入：
<body>
<script src="./dist/main.js"></script>
</body>
5、默认打包的文件夹：dist 、文件名main.js
6、修改用 npm 命令行工具打包：
"build": "webpack"
二、修改打包的入口和出口
1、添加webpack.config.js文件：
webpack.config.js
2、在文件中添加内容：
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
moduel: {
rules:[]
}
plugins:[]
}
entry
1、单文件入口配置：
entry: './src/index.js',
2、多文件入口配置：
entry：{
main:'./src/index.js',
sub:'./src/index2.js'
}
output 1、单文件出口：
output: {
//entry以对象的形式配置时，单文件入口，对象的key为打包文件的默认名字
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
1、多文件出口：
output: {
//对象的key为打包的文件名字
filename: '[name].js',
//filename: '[name].[contenthash:8].js'
path: path.resolve(__dirname, 'dist')
//publicPath:'http://cdn.com' 配置包文本全路径
}
[name]为占位符
moduel:模块配置项
rules:loader配置项
test:匹配规则
use:使用的loader,多个loader自低向上执行
plugins：插件配置
contenthash:8,文件的内容生成8位的hash值
三开发设置：
webpack-dev-server 本地开发运行：
1、安装：npm install webpack-dev-server@3.11.2
2、在package.json文件添加执行命令
"scripts": {
//打包命令
"build": "webpack",
//本地执行
"dev": "webpack-dev-server"
},
3、命令参数：
3-1：设置端口：--port 3000
3-2：在默认浏览器自动打开：--open
"dev": "webpack-dev-server --open --port 3000"
或者在webpack.config.js添加配置： `
module.exports = {
devServer:{
open:true,
port: 8081
}
}
4、请求转发（跨域）：proxy
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
//开启https请求
secure: false,
//
changeOrigin:true
}
}
5、HMR热更新：解决状态丢失
1、配置:
devServer:{hot:true}
2、初始化插件：
plugins: [ new webpack.HotModuleReplacementPlugin()]
devtool 源代码调试工具配置项
//production
devtool:'cheap-module-source-map',
//development
devtool:'cheap-module-eval-source-map',
三、Loader
webpack默认处理模块文件后缀是js。
1、file-Loader：把文件移动到指定的文件夹中，
安装：
npm install file-loader -D
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
esModule: false,
name: '[name].[ext]',
outputPath:'src/assets/'
}
}]
}]
},
1-1、name：默认是文件内容的 MD5 哈希值：name: '[name].[ext]'保留文件原有的名字
1-2、outputPath: src/assets/表示在输出目录中的路径
1-3:esModule解决html中引用图片出现[module Object]
url-loader： 但如果文件小于字节限制，则可以返回 DataURL（Base64格式）否则把文件移动到指定的文件夹中：
解决的问题：减少小图片请求的次数。
安装：
npm install url-loader -D
配置：
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
esModule: false,
name: '[name].[ext]',
outputPath:'src/assets/',
limit:24781
}
}]
}]
2、style-loader、css-loader 样式处理
安装：
npm install style-loader@1.0.1 css-loader@3.3.2 -D
配置;
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}]
3、scss-loader 样式处理
安装：
npm install node-sass@4.13.0 sass-loader@8.0.2 -D
配置：
rules: [{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}]
4、postcss-loader:浏览器样式兼容CSS3，
autoprefixer：厂商前缀
安装：
npm install postcss-loader@4.2.0 autoprefixer@8.6.5 -D
配置：
rules: [{
test: /\.scss$/,
use: ['style-loader', 'css-loader','postcss-loader', 'sass-loader'],
}]
添加postcss.config.js配置文件：
module.exports = {
plugins: [
require('autoprefixer')
]
}
修改浏览器兼容版本：在package.json文添加配置：
使用分量大于1% 的2个版本
"browserslist":["> 1% ","last 2 versions"],
开启css模块化：
rules: [{
test: /\.scss$/,
use: ['style-loader',
{
loader:'css-loader'
options:{
moduel:true
},
'postcss-loader',
'sass-loader'],
}]
字体文件处理
rules: [{
test:'/\.(eot|svg|woff)/',
loader:'file-loader'
}]
5、babel: js代码编译器（ES6代码降级ES5）
1、安装：
npm install babel-loader @babel/core -D
2、配置：
rules:[{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}]
3、安装：
npm install @babel/preset-env --save-dev
4、babel处理ES6新特性：
在使用新特性的对应文件添加：
import '@babel/polyfill'
按需引入polyfill的配置：
rules:[{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [['@babel/preset-env',{
useBuiltIns:'usage',
corejs:3
}]]
}
}
}]
core.js：解决在每一个文件中都要导入： import '@babel/polyfill'
安装： npm install core-js@3.8.3 -D
polyfill的本质是在window实例上挂载对应的ES6方法
6、vue-loader(vue2.0)
1、安装：
npm install -D vue-loader@15.7.0 vue-template-compiler@2.6.14
2、配置：
{
test:/\.vue$/,
use:["vue-loader"]
},
3、样式处理：
// sasss
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
//css
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
4、插件：
const VueLoaderPulgin=require('vue-loader/lib/plugin');
new VueLoaderPulgin(),
四、plugins
html-webpack-plugin：生成在根目录创建index.html,自动引入打包生成的index.js
1、安装：
npm install html-webpack-plugin@4.5.0
2、引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
3、配置插件
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'index.html')
})
],
clean-webpack-plugin：打包之前清空根目录
1、安装：
npm install clean-webpack-plugin
2、引入插件
const {HtmlWebpackPlugin} = require('html-webpack-plugin');
3、配置：
plugins: [
new HtmlWebpackPlugin()
]
ProgressPlugin:打包进度 1、引入插件：
const ProgressPlugin = require('webpack').ProgressPlugin;
2、配置：
plugins: [new ProgressPlugin()]
五：Tree Shaking 去除未引用代码
只支持ES Module模块化
ES Module 是静态引入、编译时引入
CommonJS 动态引入、运行时引入；
1、按需导入模块的方法
1、package.json添加：
"sideEffects":false
2、配置文件：
optimization: {
usedExports: true
},
六：打包文配置：
1、配置文件：
正式环境配置文件：webpack.pro.js
开环境配置文件：webpack.dev.js
2、package.json:添加打包命令参数：
"scripts": {
"build": "webpack --config webpack.pro.js",
"dev": "webpack-dev-server --config webpack.dev.js"
},
七：js代码分割
optimization: {
splitChunks: {
chunks:"all"
}
},
懒加载：
//异步加载
const Foo=()=>import('./foo.vue')
getFoo() {
return import('lodash').then(res => {
return res
})
}
setTimeOut(()=>{
getFoo().then((res)=>{
console.log(res);
})
},1000)
//同步加载
import Foo from './foo.vue'
import _ from 'lodash'
module（模块） chunk(代码块) bundle（代码包）
八：Css代码分割：mini-css-extract-plugin
正常情况下，style-loader会把css代码插到html的head中
mini-css-extract-plugin：是通过link的方式引入css文件
正式环境中使用css代码分割
1、安装： npm install --save-dev mini-css-extract-plugin
2、配置：
//1、引用插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//2 添加匹配规则和处理的loader
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
},
//3 实例化插件
plugins: [new MiniCssExtractPlugin()]
3、如果配置了Tree Shaking可能会导致 css文件没有加载：
修改package.json:让Tress Shaking忽略css文件
"sideEffects":[".*css"]
4、css代码压缩：
1、安装：
npm install --save-dev optimize-css-assets-webpack-plugin
配置：
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({})
]
},
九、浏览器缓存：
由于浏览器有缓存，同一个资源，就会从缓存里面取， 给打包文件添加hash值，hash值根据文件内容生成的，这样保证文件修改之后，名字每次都不一样。
output: {
filename: '[name].[contenthash:8].js'
}
十、 shim预置全局变量
解决不需要每一个页面都需要 import _ from 'ladash'
webpack 不推荐这样的方式
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
})
