Webpack
前端开发的弊端:
- 文件依赖关系错综复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级javascript 特性兼容程度较低
webpack 是一个流行的 前端项目构造工具(打包工具),可以解决当前web开发中面临的困境。
提供了友好的模块化支持,以及代码压缩混淆,处理js 兼容问题,性能优化等强大的功能
-
创建列表隔行变色项目
创建项目空白目录,并运行 npm init -y 命令 初始化包管理配置文件 package.json
新建 src 源代码目录
新建 src ->index.html 首页
初始化首页基本的结构
运行 npm install jquery -s 命令 ,安装jquery
通过模块化的形式,实现列表隔行变色的效果
-
在项目中安装和配置webpack
运行 npm install webpack webpack-cil -D 命令 安装 webpack 相关的包
在项目根目录中 创建 名为 webpack.config.js 的 webpack 配置文件
在webpack 的配置文件中,初始化如下基本配置:
module.exports = { mode:'development' // mode 用来指定构建模式 开发阶段 development / 上线阶段 production }
在 package.json 配置文件中的 scripts 节点下 新增 dev 脚本:
"scripts":{ "dev":'webpack' // script 节点下的脚本,可以通过 npm run 执行 }
在终端中运行 npm run dev 命令,启动 webpack 进行项目打包
3. 配置打包的入口与出口
打包入口文件的为 src —》 index.js
打包出口文件为 dist —> main.js
设置 打包的入口与出口 可以在 webpack.config.js 中新增如下配置
const path = require('path') // 导入 ndoe.js 中专门操作路径的模块
module.exports = {
entry:path.join(_dirname,'./src/index.js'),// 打包入口文件的路径
output:{
path:path.join(_dirname,'./dist') // 输入文件存放路径
filename:'bundle.js' // 输出文件的名称
}
}
4.配置自动打包
运行 npm install webpack-dev-server -D 命令,安装支持项目自动打包的工具
修改 package.json —> scripys 中的 dev 命令
“scripts”:{
"dev":"webpack-dev-server" // script 节点下的脚本,可以通过 npm run 执行
}
将 src -> index.html 中 script 脚本中引用路径,修改为 “/buldel.js”
运行 npm run dec 命令 重新进行打包
在浏览器中访问 http://localhoust:8080 地址,查看自动打包效果
5. 配置html-webpack-plugin 生成预览页面
1. 运行 npm install html-webpack-plugin -D 命令
2. 修改 webpack.config.js 头部区域,添加如下配置信息
//导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
// 创建插件的实例对象
template:"./src/index.html",// 指定要用到的模板文件
filename:'index.html' // 指定生成文件的名称,该文件存在于内存中在目录中不显示
})
-
修改 webpack.config.js 文件中向为外暴露的配置对象
module.exports = { plugins:[htmlPlugin] //plugins 数组是webpack 打包期间会用到一些插件列表 }
6. 配置自动打包相关的参数
//package.json中的配置
// ---open 打包完成后自动打开浏览器页面
// --host 配置 IP 地址
// -- post 配置端口
”scripts“:{
"dev":"webpack-dev-server --open -- host 127.0.0.1 --port 8888"
}
7. 通过loader 打包非 js模块
webpack 默认处理 .js 后缀名结尾的模板
其他非 .js 后缀名结尾的模块 webpack 默认处理不了需要调用 loader 加载器才能可以正常打包
loader 加载器可以协助 webpack 打包处理特点的文件模块 比如:
less-loader 可以打包 .less 相关文件
sass-loader 可以打包 .sass 相关文件
url-loader 可以打包 css 中与 url 路径相关的文件
- 运行 npm i style-loader css-loader -D 命令 安装处理 css 文件的 loder
- 在 webpack.config.js 的 module -> rules 数组中 添加loader 规则
// 所有第三方文件模块的匹配规则
module:{
rules:[
{ test:/\.css$/,use:['style-loader','css-loader']}
]
}
其中 test 表示匹配的文件类型,use 表示对应要调用的 loader
use 数组中指定的 loader 顺序是固定的
多个loader 的调用顺序是: 从后往前调用
8.less打包
- 运行 npm i less-loader less -D 命令
- 在 webpack.config.js 的 module -> rules 数组中 添加 loader 规则:
// 所有第三放文件模块的匹配规则
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
9.scss 文件
-
运行 npm i sass-loader node-sass -D 命令
-
在 webpack.config.js 的 module -> rules 数组中,添加 loader
// 所有第三方文件模板的匹配规则 module:{ rules:[ {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']} ] }
10.postCss自动添加css兼容前缀
- 运行 npm i postcss-loader autoprefixer -D 命令
- 在项目根目录中创建postcss 的配置文件 postcss.config.js 并初始化如下配置:
const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
plugins:[autoprefixer] // 挂载插件
}
- 在 webpack.config.js 的 module -> ruless 数组中 修改 css 的 loader
module:{
rules:[
{rest:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}
11.打包图片
- 运行 npm i url-loader file-loader -D 命令
- 在 webpack.config.js 的 module -> rules 数组中,添加 loader
module:{
rules:[
{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use:'url-loader?limit=16940'
}
]
}
其中 ? 之后是 loader 的参数项
limit 用来指定图片的大小 单位是 字节(byte),只有小于 limit 大小的图片 才会被转为 base 64 图片
打包 js 高级语法:
-
安装 bable 转换器相关的包 : npm i babel-loader @babel/core @babel/runtime -D
-
安装 bable 语法插件相关的包: npm i @babel/preset-env @babel/plugin-transfrom-runtime @babel/plugin-proposal-class-properties -D
-
在项目根目录中,创建babel 配置文件 babel.config.js 并初始化基本配置
module.exports = {
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transfrom-runtime','@babel/plugin-proposal-class-properties']
}
-
在 webpack.config.js 的 module -> rules 数组中,添加 loader
// exclude 为排除项,表示 babel-loader 不需要处理 node_modules 中的 js 文件 { text:/\.js$/,use:'babel-loader',exclude:/node_modules/}
Vue 单文件组件
问题:
- 全局定义的组件必须保证组件名称不重复
- 字符串模板缺乏语法高亮,在HTML有多行的时候,需要用到丑陋的\
- 不支持css 意味着当HTML 和 JavaScript 组件化时,CSS明显被遗漏
- 没有构建步骤限制,只能使用HTML 和 ES5 javaScript 而不能使用预处理器(如:Babel)
解决方法:
Vue 提供了一个解决方案 ---- 使用Vue 单文件组件
单文件组件的组成结构
template 组件的模板区域
script 业务逻辑区域
style 样式区域
<template>
这里用于定义 Vue 组件的模板内容
</template>
<script>
// 这里用于定义 Vue 组件的业务逻辑
export default{
data:() {return{}}//私有数据
methods:{ } // 处理函数
//.. 其他业务逻辑
}
</script>
<style >
这里用于定义组件的样式
</style >
webpack 配置 vue 加载器
-
运行 npm i vue-loader vue-template-compoler -D 命令
-
在 webpack.config.js 配置文件中,添加 vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module:{ rules:[ //... 其他规则 {test:/\.vue$/,loader:'vue-loader'} ] }, plugins:[ //...其它插件 new VueLoaderPlugin()// 请确保引入这个插件 ] }
在webpack项目中使用 vue
- 运行 npm i vue -s 安装vue
- 在 src ->index.js 入口文件中 通过 import vue from ’vue’ 来导入 vue 构造函数
- 创建 vue 的实例对象,并指定要控制的 el 区域
- 通过 render 函数渲染 根app 组件
// 导入 vue 构造函数
improt vue form 'vue'
//导入 app 根组件
import app from './components/App.vue'
const vm = new Vue({
// 3 指定 vm 实例要控制的页面区域
el:'#app',
//4 通过 render 函数 把指定的组件渲染到el 区域中
render:h => h(app)
})
webpack 打包发布
上线之前 同 webpack 将应用进行整体打包 可以通过 package.json 文件配置
// 在 package.json 文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中 webpack.config.js 配置文件
”scripts“:{
// 用于打包命令
”bulid“:”webpack -p“,
// 用于开发调试的命令
”dev":“webpack-dev-server --open --host 127.0.0.1 --port 3000”
}