webpack打包工具

Webpack

前端开发的弊端：

1. 文件依赖关系错综复杂
2. 静态资源请求效率低
3. 模块化支持不友好
4. 浏览器对高级javascript 特性兼容程度较低

webpack 是一个流行的 前端项目构造工具（打包工具），可以解决当前web开发中面临的困境。

提供了友好的模块化支持，以及代码压缩混淆，处理js 兼容问题，性能优化等强大的功能

1. 创建列表隔行变色项目

   创建项目空白目录，并运行 npm init -y 命令 初始化包管理配置文件 package.json

   新建 src 源代码目录

   新建 src ->index.html 首页

   初始化首页基本的结构

   运行 npm install jquery -s 命令 ，安装jquery

   通过模块化的形式,实现列表隔行变色的效果

2. 在项目中安装和配置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' // 指定生成文件的名称，该文件存在于内存中在目录中不显示
})  

3. 修改 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 路径相关的文件

1. 运行 npm i style-loader css-loader -D 命令 安装处理 css 文件的 loder
2. 在 webpack.config.js 的 module -> rules 数组中 添加loader 规则

// 所有第三方文件模块的匹配规则
module：{
	rules:[
	{ test:/\.css$/,use:['style-loader','css-loader']}
	]
}

其中 test 表示匹配的文件类型，use 表示对应要调用的 loader

use 数组中指定的 loader 顺序是固定的

多个loader 的调用顺序是： 从后往前调用

8.less打包

1. 运行 npm i less-loader less -D 命令
2. 在 webpack.config.js 的 module -> rules 数组中 添加 loader 规则：

// 所有第三放文件模块的匹配规则
module:{
	rules:[
	{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
	]
}

9.scss 文件

1. 运行 npm i sass-loader node-sass -D 命令

2. 在 webpack.config.js 的 module -> rules 数组中，添加 loader

   // 所有第三方文件模板的匹配规则
   module:{
   	rules:[
   	{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
   	]
   }
   

10.postCss自动添加css兼容前缀

1. 运行 npm i postcss-loader autoprefixer -D 命令
2. 在项目根目录中创建postcss 的配置文件 postcss.config.js 并初始化如下配置:

const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
	plugins：[autoprefixer] // 挂载插件
}

3. 在 webpack.config.js 的 module -> ruless 数组中 修改 css 的 loader

module:{
rules:[
{rest:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}

11.打包图片

1. 运行 npm i url-loader file-loader -D 命令
2. 在 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 高级语法：

1. 安装 bable 转换器相关的包 ： npm i babel-loader @babel/core @babel/runtime -D

2. 安装 bable 语法插件相关的包： npm i @babel/preset-env @babel/plugin-transfrom-runtime @babel/plugin-proposal-class-properties -D

3. 在项目根目录中，创建babel 配置文件 babel.config.js 并初始化基本配置

module.exports = {
	presets:['@babel/preset-env'],
	plugins:['@babel/plugin-transfrom-runtime','@babel/plugin-proposal-class-properties']
}

4. 在 webpack.config.js 的 module -> rules 数组中，添加 loader

   // exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
   { text:/\.js$/,use:'babel-loader',exclude:/node_modules/}
   

Vue 单文件组件

问题：

1. 全局定义的组件必须保证组件名称不重复
2. 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\
3. 不支持css 意味着当HTML 和 JavaScript 组件化时，CSS明显被遗漏
4. 没有构建步骤限制，只能使用HTML 和 ES5 javaScript 而不能使用预处理器（如：Babel）

解决方法：

​ Vue 提供了一个解决方案 ---- 使用Vue 单文件组件

单文件组件的组成结构

​ template 组件的模板区域

​ script 业务逻辑区域

​ style 样式区域

<template>
  这里用于定义 Vue 组件的模板内容
</template>
<script> 
// 这里用于定义 Vue 组件的业务逻辑
export default{
data:() {return{}}//私有数据
methods:{ } // 处理函数
//.. 其他业务逻辑
}
</script>
<style >
 这里用于定义组件的样式
</style >

webpack 配置 vue 加载器

1. 运行 npm i vue-loader vue-template-compoler -D 命令

2. 在 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

1. 运行 npm i vue -s 安装vue
2. 在 src ->index.js 入口文件中 通过 import vue from ’vue’ 来导入 vue 构造函数
3. 创建 vue 的实例对象，并指定要控制的 el 区域
4. 通过 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”
}