当前Web开发面临的困境
- 文件依赖关系错综复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级JavaScript特性兼容程度较低,等等
Webpack概述
Webpack是一款流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的的困境。
Webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作重心放到具体的功能实现上,提高了开发效率和项目的可维护性。
目前绝大多数企业中的前端项目,都是基于webpack进行打包构建的。
Webpack基本使用
1. 创建列表隔行变色项目
步骤:
① 新建项目空白目录,并运行 npm init-y
命令,初始化包管理配置文件 package.json
② 新建src源代码目录
③ 新建src -> index.html 首页
④ 初始化index.html首页基本的结构
⑤ 运行 npm install jquery -S
命令,安装jQuery
⑥ 通过模块化的形式,实现列表隔行变色效果
2. 在项目中安装和配置webpack
步骤:
① 运行 npm install webpack webpack-cli -D
命令,安装 webpack相关的包
注:npm install [email protected] --save-dev
可以指定版本号,- -save保存至运行依赖,-dev保存至开发依赖。
测试安装成功:执行下面两个代码,显示版本号,即为成功
webpack -v
webpack-cli -v
② 在项目根目录中,创建名为 webpack.config.js的webpack配置文件
③ 在 webpack的配置文件中,初始化如下基本配置:
// 编译模式
module.exports = {
mode: 'production', // development(开发模式,速度快,不压缩混淆) production(发布模式,速度慢,压缩混淆)
}
④ 在package.json配置文件中的script节点下,新增dev脚本如下:
"scripts": {
"dev": "webpack" //script节点下的脚本,可以通过npm run dev执行
},
这句话的目的就是可以直接执行npm run dev
指令,从而代替webpack
指令,项目运行时即打包。
⑤ 在终端中运行npm run dev
命令,启动webpack进行项目打包。此时webpack优先调用本地webpack包(当本地和全局包版本发生冲突时)
注:通过终端或cmd执行webpack打包命令会优先调用全局webpack,但是当本地项目和全局版本不一致时,会报错,因此执行上述第④步,这样执行npm run dev
会优先调用本地webpack版本。
注:打包默认转换的入口是./src/index.js,默认转换的出口是./dist下的main.js
3. 配置打包的入口和出口
webpack的4.X版本中默认约定:
- 打包的入口文件为 src -> index.js
- 打包的输出文件为dist -> main.js
如果要修改打包的入口与出口,可以在webpack.config.js中新增如下配置信息:
const path = require('path') // 导入node.js中专门操作路径的模块
module.exports = {
entry: path.join(__dirname,'./src/index.js'), // 打包入口文件的路径
output:{
path: path.join(__dirname,'./dist'), // 输出文件的存放路径
filename: 'bundle.js' // 输出文件的名称
}
}
4. 配置webpack的自动打包功能
步骤:
① 运行 npm install webpack-dev-server -D
命令,安装支持项目自动打包的工具
② 修改 package.json -> scripts中的dev命令如下:
"scripts": {
"dev":"webpack-dev-server" // script节点下的脚本,可以通过npm run执行
}
③ 将src -> index.html 中,script脚本的引用路径,修改为"/bundle.js"(相当于将dist下的bundle.js文件托管到/bundle.js)
<script src="/bundle.js"></script>
④ 运行npm run dev
命令,重新进行打包
⑤ 在浏览器中访问 http://localhost:8080 地址,查看自动打包效果
注意:
- webpack-dev-server 会启动一个实时打包的http服务器
- webpack-dev-server 打包生成的输出文件,默认放到了项目根目录中,而且是虚拟的、看不见的
5. 配置html-webpack-plugin生成预览页面
我们希望输入http://localhost:8080 后直接显示预览页面,需要配置html-webpack-plugin
步骤:
① 运行 npm install html-webpack-plugin -D
命令,安装生成预览页面的插件
② 修改 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地址
// --port 配置端口
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
webpack中的加载器
1. 通过loader打包非js模块
在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非.js后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错。
loader加载器可以协助webpack打包处理特定的文件模块,比如:
- less-loader 可以打包处理.less相关的文件
- sass-loader可以打包处理.scss相关的文件
- url-loader可以打包处理css中与url路径相关的文件
2. loader的调用过程
webpack中的加载器的基本使用
可打包的文件类型:css、LESS、SCSS、PostCSS、JavaScript、Image/Font、Vue…
1. 打包处理css文件
① 运行npm i style-loader css-loader -D
命令,安装处理css文件的loader
② 在 webpack.config.js的module-> rules数组中,添加loader规则如下:
// 所有第三方文件模块的匹配规则
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
其中,test表示匹配的文件类型,use表示对应要调用的loader
注意:
- use数组中指定的loader顺序是固定的。
use:['style-loader','css-loader']
- 多个loader的调用顺序是:从后往前调用(即先调用css-loader,再调用style-loader)
2. 打包处理less文件
① 运行npm i less-loader less -D
命令,安装处理css文件的loader
② 在 webpack.config.js的module-> rules数组中,添加loader规则如下:
// 所有第三方文件模块的匹配规则
module:{
rules:[
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
3. 打包处理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']
}
]
}
4. 配置postCSS自动添加css的兼容前缀(针对IE浏览器适配问题,可忽略)
① 运行 npm i postcss-loader autoprefixer -D
命令
② 在项目根目录中创建postcss的配置文件 postcss.config.js,并初始化如下配置:
const autoprefixer = require('autoprefixer ') //导入自动添加前缀的插件
module.exports = {
plugins:[autoprefixer ] // 挂载插件
}
③ 在 webpack.config.js的module-> rules数组中,修改css的loader规则如下:
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader','postcss-loader']
}
]
}
本人在执行完上述过程后,发现报错Cannot find module 'autoprefixer ',个人认为应该是版本问题,待解决。
5. 打包样式表中的图片和字体文件
① 运行 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用来指定图片的大小(一般选图片原始大小+1),单位为字节(byte),只有小于limit大小的图片,才会被转为base64图片(加载速度更快)
6. 打包处理js文件中的高级语法
① 安装babel转换器相关的包:npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
② 在 webpack.config.js的module-> rules数组中,添加loader规则如下:
module:{
rules:[
{
test:/\.js$/,
exclude:/(node_modules|bower_components)/,
use:{
loader:'babel-loader',
options:{
presets:['es2015']
}
}
}
]
}
如果出现webpack版本问题,可以将webpack卸载重新install(本人webpack版本为4.29.0)
总结
创建webpack.base.config.js配置文件
- entry:入口文件,指定webpack用哪个文件作为项目的入口
- output:输出,指定webpack把处理完成的文件放置到指定路径
- module:模块,用于处理各种类型的文件
- plugins:插件,如:热更新、代码重用等
- resolve:设置路径指向
- watch:监听,用于设置文件改动后直接打包