1、初始化一个 package.json 文件，安装指令npm init -y
package.json作用： 记录了项目的配置信息，包括名称、版本、许可证等元数据也会记录所需的各种模块，包括 执行依赖，和开发依赖以及scripts字段2、安装webpack，安装指令npm install（i） webpack --save-dev
会产生一个node_modules文件夹3、安装webpack-cli，安装指令npm i webpack-cli --save-dev
简易客户端,用来以webpack协议连接相应服务。超过4.0版本的webpack需要额外安装一个命令行工具 webpack-cli（开发环境依赖 npm i -D webpack-cli4、检测webpack是否安装成功，检查指令node_modules/.bin/webpack -v windows下需要用** 反斜杠\ **’
5、配置入口与出口文件
在src目录下创建一个main.js文件，在根目录下创建一个webpack.config.js文件main.js文件是入口文件 设置了一个名为 main 的入口，并以 src 下的 main.js 作为入口文件，然后输出到根目录下的 dist 文件夹中。 webpack.config.js文件是webpack的配置文件在webpack4中，我们需要设置 mode 属性，用来决定当前是development还是production环境，webpack会根据此值来进行一些默认操作，两种环境的不同配置后面的博文会详解，这里我们设置为 ‘none’ ，来避免默认操作。path 是 nodeJs中的核心模块用来操作路径，__dirname 表示文件的当前路径（此时为根路径）。而 output中的filename属性，[name] 表示入口的名称，此处就是 main。
``` ++配置入口与出口文件++ const path = require('path') let config = { mode: 'none', // 定义开发模式 entry: { // 定义入口 main: path.join(__dirname, './src/main.js') }, output: { // 定义出口 filename: '[name].bundle.js', path: path.join(__dirname, './dist') } } module.exports = config6、执行webpack的打包
先在package.json 文件中的script 中添加： "build": "webpack --config webpack.config.js --progress --colors"执行指令**npm run build**,即可完成打包将生成在dist目录下的bundle文件引入index.html文件中即可1、webpack-dev-server
在没有引入webpack-dev-server之前，每次想看以下效果，必须进行npm run build重新打包加载静态资源，现在可以利用这一插件自动刷新页面，非常棒
安装方法
执行指令**npm i webpack-dev-server**,即可完成安装（++会报错++）先在package.json 文件中的script 中添加："dev": "webpack-dev-server" 运行之前必须添加这个script标签内容，不然会报错 执行指令**npm run dev**，即可执行插件 ctrl+c 可以暂停 webpack-dev-server运行时会帮我们复制一份bundle.js文件，没有存放在物理磁盘上，而是托管在电脑的内存中，所以我们在根目录下看不见bundle.js文件webpack-dev-server虽然是虚拟存在电脑的内存中，但是我们可以认为和src、dist、node_module平级引入虚拟bundle.js路径src="/bundle.js"，这时候打开http://localhost:9999/需要手动复制
引入webpack-dev-server的相关内容方式一（好用）：
在package.json 文件中的script 中添加： "dev": "webpack-dev-server --open --port 9999 --contentBase src --hot"
open表示自动打开浏览器port设置启动时候的运行端口contentBase表示托管的根目录hot表示无刷新重新加载（俗称热加载），可以减少请求数量引入webpack-dev-server的相关内容方式二（自己试过不行）：
其实是将package.json中script内容分开写在package.json 文件中的script 中添加： "dev": "webpack-dev-server" 在webpack.config.js 文件中引入全局变量： const webpack = require('webpack') 在module.exports对象中添加对象： devServer: { open: true, port: 3000, hot: true }, plugins: { new webpack.HotModuleReplacementPlugin() }2、html-webpack-plugin
作用： 为html文件中自动引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以根据指定页面生成一个内存中的页面，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口 使用： 1、安装npm i html-webpack-plugin -D2、导入内存中生成Html页面的插件 在webpack.config.js 文件中引入全局变量： const htmlWebpackPlugin = require('html-webpack-plugin') 在module.exports对象中添加对象： plugins: [ new htmlWebpackPlugin({ //创建一个 在内存中 生成html 页面的插件 template: path.join(__dirname, './index.html'), //指定模板页面，将来会根据指定的模板页面路径生成内存中的页面 filename: 'index.html' //指定生成页面的名称 })3、处理css文件
为什么要处理非js类文件？ 因为webpack默认只能处理js类型文件，对于非js类文件需要第三方加载器 如果需要处理css文件，那么需要什么loader加载器呢？ 1、在入口文件中引入css文件import './css/index.css'2、安装npm i style-loader css-loader -D3、在webpack.config.js 配置文件中新增一个配置节点，叫做module，它是一个对象，在这个module对象上，有一个属性是rules，这个属性rules是个数组，在这个数组里面存放**所有的第三方文件（非js文件）**的匹配和处理规则 { test: /\.css$/, use: ['style-loader', 'css-loader'] }4、处理less文件
为什么要处理非js类文件？ 因为webpack默认只能处理js类型文件，对于非js类文件需要第三方加载器 如果需要处理less文件，那么需要什么loader加载器呢？ 1、在入口文件中引入css文件import './css/index.less'2、安装npm i less-loader -D3、安装less-loader的内部依赖项npm i less -D4、在webpack.config.js 配置文件中新增一个配置节点，叫做module，它是一个对象，在这个module对象上，有一个属性是rules，这个属性rules是个数组，在这个数组里面存放**所有的第三方文件（非js文件）**的匹配和处理规则 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }5、处理sass文件
如果需要处理sass文件，那么需要什么loader加载器呢？ 1、在入口文件中引入css文件import './css/index.**scss**'2、安装npm i sass-loader -D3、安装sass-loader的三个内部依赖项 npm i node-sass -D,这里用npm装一般不会成功（自己用npm装可以）npm i sass -D,（不装也可以）npm i fibers -D,（不装也可以） 4、在webpack.config.js 配置文件中新增一个配置节点，叫做module，它是一个对象，在这个module对象上，有一个属性是rules，这个属性rules是个数组，在这个数组里面存放**所有的第三方文件（非js文件）**的匹配和处理规则 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }5、使用url-loader处理url等图片链接文件
默认情况下webpack不能处理css文件中的url地址，不管是字体库，还是图片如果需要处理url地址，那么需要什么loader加载器呢？ 1、在入口文件中引入css文件import './css/index.**scss**'2、安装npm i url-loader file-loader -D，url也需要一个依赖文件file-loader3、配置文件{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }4、添加的图片会帮我们转成base64格式（能减少二次请求），但有些大图我们却并不想转成base64格式 url-loader后面进行传递参数limituse: ‘url-loader？limit=数值’ 当上传图片大小（byte）>= limit数值时，图片不会被转成base64格式，当上传图片大小（byte）< limit数值时，图片会被转成base64格式， 总结：大图保真，小图压缩 5、当我们想要两张名称一样的图片保持图片原来的名称该怎么做呢？ use: ‘url-loader？limit=数值**&name=[hash:8]-[name].[ext]**’ [hash:8]：表示取hash的8位，hash共有32位[name]：表示使用图片原名称[ext]：表示使用图片扩展名6、使用url-loader处理字体文件
引入字体文件，例如bootstrap里面的 1、安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org2、直接安装3.3.7版本bootstrap cnpm i bootstrap@3.3.7 -S,本地安装的话会提示安装jQuery3（可以不装）、bootstrap4.0版本，图标和样式分离了，使用图标的话还需要安装一个叫open-iconic这个包，经过多次安装4.0失败，痛下决心使用3.3.7版本，一次成功。。。。。 cnpm i https://github.com/iconic/open-iconic.git -D 4、配置文件{test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}5、在入口文件中引入css文件import 'open-iconic/font/css/open-iconic-bootstrap.css'7.webpack中babel配置处理ES6语法（固定版本）
webpack默认只能处理ES5语法和少许的ES6语法，所以需要借助插件处理高级ES6语法babel可以帮我们将高级语法转成低级语法，安装以下三个配置即可 npm install -D babel-loader@7.1.4 这里的babel-loader最好不要超过7.15版本，版本高会报错 npm install -D babel-core@6.26.0npm install -D babel-preset-env@1.6.1 打开配置文件，rules数组中添加新的匹配规则 { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ }exclude表示不包含这个文件，由于node_modules里面的js文件都是已经打包好的，没必要二次打包，而且二次打包还不能运行程序 根目录下创建.babelrc文件 { "presets": ["env"], //配置语法 "plugins": [] //配置插件(为空，可以不写） }8、webpack中如何使用vue
安装vue的包：cnpm i vue -s
由于在webpack中，推荐使用.vue这个组件模块定义组件，所以，需要安装能解析这种文件的loader：cnpm i vue-loader vue-template-compiler -D
在min.js中，导入vue模块 import Vue from 'vue'，这是导入的是阉割版的vue，要使用的话需要加一个配置，在package.cpnfig.js中加入
const VueLoaderPlugin = require('vue-loader/lib/plugin') plugins: [ new VueLoaderPlugin() ], module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ]定义一个一个.vue结尾的组件，其中，组件有三部分组成：template、script、style
使用import login from './login.vue'导入这个组件
创建vm实例`var vm = new Vue({el:"#app",render: c => c(login) })
在页面中创建一个id为app的元素，作为vm控制的区域
9、webpack中如何使用vue-router（路由） 10、webpack中如何使用MUI
index.html首页引入吧，在main里面引入没法用11、webpack中如何使用vue-cli快速构建项目
12、git仓库使用命令 基本命令：
git status 查看当前的状况git add 由工作区提交文件到暂存区git commit -m"提交描述" 由暂存区提交到仓库操作流程：
基本信息设置 1、设置用户名： git config --glibal user.name'wait-for-the-wind' 2、设置用户邮箱： git config --glibal user.email'739178270@qq.com'12、axios使用 属性：axios是基于promise封装的ajax库 1、安装npm install axios
