目录
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
4.1、安装webpack
Webpack可以使用npm安装，新建一个空的练习文件夹使用：
初始化：npm init
全局安装： npm install -g webpack-cli@3 webpack@4.39.3
webpack-cli 来执行webpack相关的命令行。
webpack webpack的核心模块
4.2、配置文件入口--出口
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 查看结果
4.3、一次打包多个文件
之前只能打包一个文件，在项目中可能一次要打包多个文件 只需要修改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"//生成的文件名
},
}4.4、配置打包模式
Webpack4中有两种模式，一种叫做production （生产环境）
还有一种叫development （开发环境）
在每次打包的时候都要手动指定非常的麻烦 ，配置文件指定打包模式
module.exports={
entry:{
index:"./src/index.js",//入口
indexa:"./src/indexa.js"
},
output:{ //出口
path:__dirname+"/dist",//文件夹
filename:"out[name].js"//生成的文件名
},
mode:"development"//开发模式指定为开发模式
}4.5、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,//在浏览器中自动打开
port:"8081",//设置端口
host:"127.0.0.1"//访问地址
}如果觉得webpack-dev-server麻烦的话 可以使用package.json进行配置
Npm run start启动
4.6、Loaders加载器/打包器
加载器/打包器可以将不同的文件类型（如typescript，css、scss、图片以及对老版本/新版本的JavaScript）转换方便我们使用
Vue Loader
注意：Vue Loader 是一个Webpack的 loader，它支持 .vue 单文件组件的各个<template>、<script> 和 <style>打包成浏览器可以识别的内容
五、Webpack总结
webpack的基本能力：处理依赖、模块化、打包
1、依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块
2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，可以减少、优化代码的体积
3、各种插件：babel把ES6+转化为ES5-，eslint可以检查编译时的各种错误
5.1、Webpack打包原理
webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖的文件，使用loaders【加载器】来处理它们，最后打包成一个或多个浏览器可识别的js文件
5.2、 webpack工作的过程
1、解析配置参数，合并从(npm install 类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息；
2、注册配置中的插件，做出对应的反应；
3、解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去；
4、在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换；
5、递归结束后得到每个文件最终的结果，根据output 配置生成代码；
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
