w ebpack ****
webpack主要是打包，所以其核心存在两个部分，入口和出口，你可以把webpack加工想象成香肠加工厂，就是活猪进去，香肠出来的那种，但是如果每次加工都需要员工亲力亲为，那多麻烦那，所以我们考虑到了自动化配置。webpack存在功能类似的配置文件，让webpack通过配置，全自动的执行我们需要的编译操作。
webpack分成四个部分，期中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命名为webpack.config.js ，还有webpackfile.js ，
总结一下，webpack共分为四个部分，这个概念一定要记好，本堂课就是围绕这四个配置进行展开的 :
- 入口 * 出口 * 加载器 * 插件
什么是webpack****
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
webpack能干什么****
根据入口文件的依赖，加载所有模块js，然后合并成一个js;标准且纯粹的模块化打包工具 : 依赖一个文件为入口打包所有依赖为当前浏览器可用的代码。
WebPack和Grunt以及Gulp相比有什么区别****
Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
1.Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
2.Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
开始使用webpack****
安装node 最低要求v8.9.4****
安装webpack****
Webpack可以使用npm安装，新建一个空的练习文件夹使用：
初始化：npm init****
全局安装： npm install -g ****webpack-cli@3 webpack@4.39.3
webpack-cli 来执行webpack相关的命令行。
webpack webpack的核心模块****
配置文件入口--出口****
Webpack的配置文件叫 webpack.config.js
入口：entry
出口：output
基本格式：
module.exports={
entry:"./src/index.js",//入口
output:{ //出口
path:__dirname+"/dist",//文件夹
filename:"outindex.js"//生成的文件名
}
}
新建项目 创建index.Js写入
function demo(){
console.log("hello")
}
demo()
结合上面的配置文件 cmd中运行webpack 查看结果
一次打包多个文件****
之前只能打包一个文件，在项目中可能一次要打包多个文件 只需要修改webpack.config.js配置文件entry 与output的filename。
module.exports={
entry:{
index:"./src/index.js",//入口
indexa:"./src/indexa.js"
},
output:{ //出口
path:__dirname+"/dist",//文件夹
filename:"out[name].js"//生成的文件名
},
}
配置打包模式****
Webpack4中有两种模式，一种叫做production （生产环境）还有一种叫development （开发环境）在每次打包的时候都要手动指定非常的麻烦
配置文件指定打包模式
module.exports={
entry:{
index:"./src/index.js",//入口
indexa:"./src/indexa.js"
},
output:{ //出口
path:__dirname+"/dist",//文件夹
filename:"out[name].js"//生成的文件名
},
mode:"development"//开发模式指定为开发模式
}
plugin插件****
plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。
plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。
****
clean-webpack-plugin可以实现在打包时，清空原有的内容。****
在之前打包的时候如果修改下输出的文件名字 会发现打包之后 之前的打包内容也在 如果想在打包的之后清空之前的内容可以使用clean-webpack-plugin这个插件
1、下载
cnpm install clean-webpack-plugin -D
2、引入
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
3、使用
plugins:[//是一个数组 数组的每一项就是你使用的插件
new CleanWebpackPlugin()
]
****
webpack-dev-server****
搭建一个开发中的服务器
安装：npm install -g webpack-dev-server
运行：webpack-dev-server
在浏览器运行:localhost:8080 浏览器就能看见public模版的内容
在webpack配置文件中添加 并且删除之前生成的dist文件夹 （会发现不会在生成那个文件夹了 因为这个是开发服务 所以就会把生成的内容保存在缓存中 ）
devServer:{
open:true,//在浏览器中自动打开
}
还可以配置
devServer:{
open:true,//在浏览器中自动打开
port:"8081",//设置端口
host:"127.0.0.1"//访问地址
}
如果觉得webpack-dev-server麻烦的话 可以使用package。json配置
Npm run start启动
Loaders加载器/打包器****
加载器/打包器可以将不同的文件类型（如typescript，css、scss、图片以及对老版本/新版本的JavaScript）转换方便我们使用
Vue Loader
注意：Vue Loader 是一个Webpack的 loader，它支持 .vue 单文件组件的各个
