一、初识webpack
1、什么是webpack?
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用
2、webpack工作的方式
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件
3、作用
模块化:让我们可以把复杂的程序细化为小的文件;
打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化
和提升性能的责任。
二、webpack与gulp、Grunt的区别
webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具
三、webpack的打包流程
webpack是建立在module之上进行打包的
四、webpack基本配置
五、webpack4.0的安装
1、全局安装
cnpm install webpack webpack-cli -g
注意:不建议全局安装。
2、局部安装
npm init //初始化项目
cnpm install webpack webpack-cli -D // -D等价于–save-dev
3、webpack-cli的作用
可以让我们在命令行中正确的使用webpack 以及npx webpack 等命令 如果不安 装则无法使用
4、文件编译
npx webpack index.js
5、npx
npx :会帮助我们在当前目录下面的node_modules包中找到webpack进行使用
npx webpack -v //查看webpack版本号
npx info webpack //查看webpack以往的一些版本号
npx webpack <文件名称> //文件编译
六、预热:文件编译
1、webpack默认是基于webpack.config.js进行打包的,如果需要指定其他文件名称
进行打包可以按照如下这样书写
npx webpack --config <文件名称>
2、npm scripts
如果在npm scripts中使用webpack的情况下会优先在工程目录下面的 node_modules中找相关的依赖
如果我们的编译命令过于复杂那么我们可以在package.json中的scripts中进行简化
配置
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
运行命令的时候只需要npm run <命令名称即可>
3、webpack打包环境
module.exports = {
mode:"production" //生产环境
model:"development"//开发环境
}
4、预热打包配置
1、npm init -y 生成一个node包
2、局部安装webpack
3、建立webpack.config.js
4、配置webpack.config文件
output:{
//占位符 满足线上地址的需求
publicPath:‘html://cdn.com/’
}
七、什么是开发环境、测试环境、生产环境
1、开发环境:项目尚且在编码阶段,我们的代码一般在开发环境中 不会在生产环
境中,生产环境组成:操作系统 ,web服务器 ,语言环境。 php 。 数据库 等等
2:测试环境:项目完成测试,修改bug阶段
3:生产环境:项目数据前端后台已经跑通,部署在阿里云上之后,有客户使用,
访问,就是网站正式运行了。
三个环境也可以说是系统开发的三个阶段:开发->测试->上线
4:--save && --save-dev的区别
可分别将依赖(插件)记录到package.json中的dependencies和 devDependencies 下面。
dependencies下记录的是项目在运行时必须依赖的插件,常见的例如react jquery 等即及时项目打包好了、上线了,这些也是需要用的,否则程序无法正常执行
devDependencies下记录的是项目在开发过程中使用的插件,一旦项目打包发布、 上线了之后,devDependencies中安装的东西就都没有用了
如果模块是在开发环境中使用,那么我们安装依赖的时候需要--dev
webpack 基本配置
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");//这个是做HTML的引入使用
const VueLoaderPlugin = require('vue-loader/lib/plugin') //vue插件的引入,必须
//定义入口文件路径及出口文件路径
const PATH = {
dev:path.join(__dirname,"./src/main.js"),
build:path.join(__dirname,"./dist")
//dev和build可以随意命名
}
//webpack的配置(导出一个对象)
module.exports = {
mode:'development', //定义开发环境
//入口配置
entry:{
app:PATH.dev //APP也是随意取名的,看7行代码.
},
//出口配置
output:{
filename:"[name].js", //打包出去后名称叫这个
path:PATH.build //出口路径,看8行代码
},
//配置loader 将浏览器不识别的一些语法转换为浏览器识别的一些语法
module:{
//规则
rules:[ //rules是系统固定的,这里的一个对象就是一个规则
{
test:/\.(js)$/, //每个对象都会有test,这句话是匹配后缀名为js的文件
use:{
loader:"babel-loader", //通过babel-loader进行解析,上查???把ES6代码解析成为ES5代码,利于浏览器阅读
options:{
presets:["@babel/env"] //这是一种配置规则,ES6转为ES5(需要安装这个依赖)
}
}
},
{
test:/\.(css|scss)$/, //安装处理css 文件的
//css loader执行的顺序 从右到左 从下到上
use:["style-loader","css-loader","sass-loader"]
},
{
/*
当图片的大小小于2048的时候用url-loader做解析
大于2048的时候用file-loader做解析 系统会自动去找file-loader
(在node-modules 文件夹内找)
url-loader:解析的时候会解析成base64的形式
file-loader会解析成原本的形式
*/
test:/\.(jpg|png|gif)$/,
use:{
loader:"url-loader",
options:{
limit:2048
}
}
},
{
test:/\.(woff|svg|eot|ttf|woff2)$/,
use:["url-loader"]
},
{
test:/\.vue$/,
loader:"vue-loader"
}
]
},
plugins:[ //这个是用来写插件的,使用任何都必须要new
new htmlWebpackPlugin({
filename:"index.html", //打包后的文件名称
template:"index.html", //模板文件
title:"Vue" //titile
}),
new VueLoaderPlugin()
],
devServer:{ //当你打开页面的时候会自动打开浏览器
open:true
}
}