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配置
"main":"a.js",
"scripts":{
"test":"echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server"
},
"keywords":[],
"author":"",
Npm run start启动
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可以检查编译时的各种错误
Webpack打包原理
webpack是把项目当作一个整体,通过给定的一个主文件,webpack将从这个主文件开始找到你项目当中的所有依赖的文件,使用loaders来处理它们,最后打包成一个或多个浏览器可识别的js文件
webpack怎么工作的过程:
1、解析配置参数,合并从(npm install 类似的命令)和webpack.config.js文件的配置信息,输出最终的配置信息;
2、注册配置中的插件,做出对应的反应;
3、解析配置文件中的entry入口文件,并找出每个文件依赖的文件,递归下去;
4、在递归每个文件的过程中,根据文件类型和配置文件中的loader找出对应的loader对文件进行转换;
5、递归结束后得到每个文件最终的结果,根据entry 配置生成代码;