模块化
js,css等的模块化
组件化
复用现有的UI,样式行为
规范化
目录结构的划分,编码规范化,接口规范化,文档规范化,git分支管理
自动化
自动化构建,自动化部署,自动化测试
基本使用
1.新建空白项目使用命令初始化包管理配置文件
npm init -y
2.新建src源代码目录
3.新建src/index.html和index.js
4.初始化页面基本结构
5.安装jq
npm intsall jquery -S
通过es6模块化引入js,并写出代码让html页面的ulli实现隔行渐变,发现不起作用
import $from 'jquery'
下载webpack前端工程化构建工具
npm i webpack@5.5.1 webpack-cli@4.2.0 -D
再根目录创建webpack.config.js文件并初始化:
module.exports={
mode:'development'//指定构建模式是开发模式还是生产模式development/production
}
再package.json中script中创建指令
// 通过npmrun启动项目
"dev": "webpack",
在终端运行
npm run dev
发现项目多了一个dist文件夹,看一下里面。webpack通过配置把js文件转换成了没有兼容性的文件,在index.html中导入发现可以正常运行
<script src="../dist/main.js"></script>
把mode设置为生产模式然后打包
mode:'production'
对比两次打包的结果发现文件小了时间长了
webpack.config.js文件在webpack真正打包前会通过读取这个配置文件,基于给定的配置进行打包
可以边看webpack官网边学习
1.修改输入输出文件路径
//导入路径处理模块
const path =require('path')
module.exports = {
mode: 'production',
entry: path.join(__dirname,'./src/index.js'),//文件打包入口文件
output:{
path:path.join(__dirname,'./dist'),//打包到什么地方
filename:'main.js'//文件叫什么名字
}
}
2.安装webpack-dev-server让webpack监听项目源代码的变化,从而自动打包
npm install webpack-dev-server@3.11.2 -D
1.配置在package.json script中重新配置
"dev": "webpack serve"
2.执行命令后每次保存都会实时打包实时打包的文件放到内存里面了
npm run dev
不再根据output路径输出,存放到实际的物理磁盘上,提高输出性能,默认放到了项目的根目录中隐藏不可见的,但是是可以被访问到的
<script src="/main.js"></script>
通过/文件名访问,在终端中的端口中可以访问到html页面
html-webpack-plugin 打包html页面
在webpack中配置
1.安装4.5.1
npm install --save-dev html-webpack-plugin
2.安装完成后在webpack文件中配置
引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
创建插件的实例对象
//导入html打包文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//创建html打包文件的实例对象
const HtmlPluing = new HtmlWebpackPlugin({
template: './src/index.html', //源文件存放路径
filename: 'index.html' //指定打包完成后存放路径
})
挂载实例对象
plugins: [HtmlPluing]
出现Cannot GET /检查端口localhost是否被占用,试着用127.0.0.1访问试试,还不行就ping一下localhost看看是不是::1是的话就是端口被占用,重启电脑或修改相关配置文件
修改host文件用记事本打开C:/WINDOWS/system32/drivers/etc/hosts文件,看里面是否有包含:
127.0.0.1 localhost
如果没有则将其添加进去,再查看能否访问localhost。
注意:1.通过dev-server打包的文件默认放到了内存中去看不到但是可以访问到
2.生成的index文件页面底部自动引入js文件,可以在浏览器element选项控制台中看见在尾部由引入js的script标签
devServer节点
module.exports = {
mode: 'development',
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
open: true, //自动打开浏览器
host: '127.0.0.1', //指定主机地址
port: 8080 //指定端口号
},
plugins: [HtmlPluing]
}
指定运行的端口号和主机地址等
loader 协助webpack打包特定的模块
webpack只能打包以.js结尾的模块,其他模块则默认处理不了,需要调用loader包才可以正常打包!
css-loader,less-loader处理css,less文件
babel-loader处理更高级的js语法等
1.webpack运行时通过判断是不是js模块
2.是的话继续向下查看是不是更高级的js语法,
2.1不是js模块的话就看看是否配置了loader处理模块没有就报错,
3回到2是高级的js语法的话就要判断有没有配置babel有就处理没有就报错
回到2如果是基础的js语法就让webpack进行处理
打包处理css文件
安装处理css文件的loader,和打包css文件的loader
npm i style-loader css-loader -D
配置处理规则test表示匹配的文件类型,use表示对应要调用的loader
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']//先引入后打包
}
]
}
打包处理less文件
安装插件
npm i less-loader less -D
修改配置文件
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/i,
use: ['style-loader', 'css-loader','less-loader']
}
]
}
loader加载器
打包处理样式表中路径相关的文件
npm i url-loader file-loader -D
装了url-loader图片不显示了
{
test: /\.jpg|png|gif$/i,
use: ['url-loader?limit=55555555555']
}
通过对象形式配置
{
test: /\.jpg|png|gif$/i,
use: {
loader:'url-loader',
options:{
limit:222222222//图片小于这个大小就会转化成base64格式
}
}
}
Babel-loader
打包处理高级js语法有些js语法带有特殊的类不容易被webpack理解
安装依赖包
npm i babel-loader
下一个babel
的 Node.js API
@babel/core
下一个转化class中的高级语法
@babel/plugin-proposal-class-properties
配置配置文件
{
test:'/\.js$/',
exclude:'/node_modules',//排除node_modules文件
use:{
loader:'babel-loader',
options:{
plugins:['@babel/plugin-proposal-class-properties'],
}
}
}
打包发布
1.开发环境下打包生成的文件放在内存中,无法获取到最终的打包文件
2.开发环境下,打包文件不会进行代码压缩和性能优化
配置打包发布
--mode是模式属性,production是值代表以生产模式打包文件
"scripts": {
"dev": "webpack serve",
"build":"webpack --mode production"
//--mode是模式属性,production是值代表以生产模式打包文件
},
配置把image,js放到独立的文件夹
每次打包自动清理dist旧文件
安装插件clean-webpack-plugin
npm i clean-webpack-plugin -D
修改配置文件,导入并实例化,在plugins中引用
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
plugins: [HtmlPluing, cleanPlugin],
企业级打包发布
1.生成打包报告,分析优化方案
2.Tree-Shaking
3.为第三方库启用cdn加载
4.配置组件按需加载
5.路由懒加载
6.自定义首页内容
SourceMap
用来处理投入生产环境前压缩打包产生的压缩混淆,压缩混淆后的代码出bug很难解决。
sourcemap是一个信息文件,里面储存着位置信息,也就是说sourcemap中储存着代码混淆的前后对应关系
在配置文件中配置
module.exports = {
mode: 'development',
devtool:'eval-source-map',//只能在开发环境使用
entry: path.join(__dirname, './src/index.js'),
output: {
生产环境下默认省略debtool不会生成sourcemap,防止代码暴露,可以将值设置为
devtool:'nosources-source-map'
这样就只会显示行数不会定位到代码
即看到行数又暴露代码可以设置(不建议使用)
devtool:'source-map'
总结:1.实际开发中不需要手动配置,脚手架可以直接生成带webpack的项目框架
2.webpack安装,修改webpack.config.js打包配置文件
3.plugin(插件):webpack-dev-server,html-webpack-plugin
4.loader:css-loader,style-loader,less-loader
5.sourcemap用来定位错误行数方便调试