BEGIN
工程化的概念
- 模块化:js的模块化、css的模块化、资源的模块化;
- 组件化:复用现有的UI结构、样式、行为;
- 规范化:目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理;
- 自动化:自动化构建、自动部署、自动化测试;
webpack的基本使用
1.什么是webpack
概念:是前端项目工程化的具体解决方案。
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
好处:让程序员把重心放到了具体功能的实现上,提高了前端开发效率和项目的可维护性。
注意:目前vue、react等前端项目,基本上都是基于webpack进行工程化开发的。
2.创建列表隔行变色项目
知识点2
npm init -y
//项目初始化,创建package.json文件
知识点2
-S 是 --save
-D 是 --save-dev
知识点3
npm install jquery -S
//-S的作用是告诉npm,jquery安装后需要写入到package.json的dependencies中
//dependencies是开发阶段和上线阶段都要用到的包
3. 在项目中安装webpack
知识点4
//安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
//-D的作用是告诉npm,webpack安装后需要写入到package.json的devDependencies中
//devDependencies是只在开发阶段要用到的包
4. 在项目中配置webpack
首先在项目根目录中创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置:
// 使用nodejs中的导出语法,向外导出一个webpack的配置对象
module.exports = {
mode: 'development'
// mode 用来指定构建模式,可选值有 development 和 production
}
然后在package.json的scripts节点下,新增dev脚本如下:
"scripts": {
"dev":"webpack"
},
最后在终端运行npm run dev命令,启动微博pack进行项目的打包构建
4.1 mode的可选值
- development
概念:用于开发环境,不会对打包生成的文件进行代码压缩和性能优化,打包速度快,适合在开发阶段使用 - production
概念:用于生产环境,会对打包生成的文件进行代码压缩和性能优化,打包速度很慢,仅适合在项目发布阶段使用
4.2 webpack.config.js作用
- webpack.config.js 是webpack的配置文件。webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。
- 注意:由于webpack是基于node.js开发出来的打包工具,因此在它的配置文件中,支持使用node.js相关的语法和模块进行webpack的个性化配置。
4.3 webpack中的默认约定
在webpack4.x和5.x的版本中,有如下的默认约定:
- 默认的打包入口文件为:src --> index.js
- 默认的输出文件路径为:dist --> main.js
- 可以在webpack.config.js中修改打包的默认约定
4.4 自定义打包的入口与出口
在webpack.config.js配置文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口
// 导入node.js中专门操作路径的模块
const path = require('path')
// 使用nodejs中的导出语法,向外导出一个webpack的配置对象
module.exports = {
// 打包入口的文件路径
entry: path.join(__dirname, './src/index.js'),
output: {
// 输出文件的存放路径
path: path.join(__dirname, './dist'),
// 输出文件的名称
filename: 'bundle.js'
}
}
webpack的插件
1.webpack插件的作用
通过安装和配置第三方插件,可以拓展webpack的能力,从而让webpack用起来更方便,最常用的webpack插件有如下两个:
- webpack-dev-server
类似于node.js阶段用到的nodemon工具,每当修改了源代码,webpack会自动进行项目的打包和构建 - html-webpack-plugin
webpack中的html插件,类似于一个模板引擎插件,可以通过此插件定制index.html页面的内容
2.webpack-dev-server插件的使用
2.1 安装webpack-dev-server
运行如下代码:
npm install webpack-dev-server@3.11.2 -D
2.2 配置webpack-dev-server
- 修改package.json->scripts中的dev命令如下
{
"scripts": {
"dev":"webpack-server"
}
}
- 再次运行npm run dev,重新进行项目打包
- 打开终端,修改js文件即可看见变化
遇到的问题
- npm run dev之后报错,百度检查之后,可能是webpack-cli@4.7.2版本更不上,则需要更新至webpack-cli@4.9.0
npm install webpack-cli@4.9.0 -D
- 无法正常安装1中的代码,需全局更新npm,代码如下
npm install npm -g
3.html-webpack-plugin插件的使用
3.1 安装html-webpack-plugin
运行如下代码:
npm install html-webpack-plugin@5.3.2 -D
3.2 配置html-webpack-plugin
在webpack.config.js中添加如下配置
// 导入html插件,得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 创建html插件实例对象
const htmlPlugin = new HtmlPlugin({
// 指定要复制哪个文件
template:'./src/index.html',
// 指定复制出来的文件名和存放位置
filename: './index.html'
})
// 使用nodejs中的导出语法,向外导出一个webpack的配置对象
module.exports = {
// 插件数组,将来webpack在运行时,会加载并调用这些插件
plugins: [htmlPlugin]
}
3.3 解惑html-webpack-plugin
- 通过html插件复制到项目根目录中的index.html也被放到了内存中
- html插件在生成index.html页面,自动注入了打包的bundle.js文件
4.devserver节点
在webpack.config.js配置文件中,可以通过devserver节点对webpack-dev-server插件进行更多的配置,代码如下:
devServer: {
open: true,
// 默认打开的主机地址
host: '127.0.0.1',
// 如果端口号是80,可以省略
post: 80,
}
注意:凡是修改了webpack.config.js配置文件,或者package.json配置文件,必须重启实时打包的服务器,否则最新的配置无法生效!
webpack中的loader
1. loader概述
在实际开发中,webpack默认只能打包处理以.js后缀名的模块,其他非.js后缀名的模块,webpakc默认处理不了,需要调用loader加载器 才可以正常打包,否则会报错!
loader加载器的作用: 协助webpack打包处理特定的文件模块.比如:
- css-loader可以打包处理.css相关的文件
- less-loader可以打包处理.less相关的文件
- babel-loader可以打包处理webpack无法处理的高级js语法
2. loader的调用过程
x
3. 打包处理css文件
- 运行npm i style-loader@3.0.0 css-loader@5.2.6 -D命令,安装处理css文件的loader
- 在webpack.config.js的module->rules数组中,添加loader规则如下:
module:{
// 所有第三方文件模块的匹配规则
rules: [
// 文件后缀名的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
4. 打包处理less文件
- 运行npm i less-loader@10.0.1 less@4.1.1 -D命令,安装处理css文件的loader
- 在webpack.config.js的module->rules数组中,添加loader规则如下:
module:{
// 所有第三方文件模块的匹配规则
rules: [
// 文件后缀名的匹配规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
5. 打包处理样式表中与url路径相关的文件
- 运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令
- 在webpack.config.js的module->rules数组中,添加loader规则如下:
module:{
// 所有第三方文件模块的匹配规则
rules: [
// 文件后缀名的匹配规则
{ test: /\.jpg|png|gif$/, use: ['url-loader?limt=22229'] }
//
]
}
注意: 其中 ? 之后是loader的参数项
- limit用来指定图片的大小,单位是字节(byte)
- 只有 ≤ limit大小的图片,才会被转成base64格式的图片
6. 打包处理js中的高级语法
webpack只能打包处理 一部分高级的js语法,对于那些webpack无法处理的高级js语法,需要借助于babel-loader进行打包处理。
例如webpack无法处理以下代码:
// 定义装饰性函数
function info(target){
target.info = 'Person info'
}
// 定义一个普通的类
@info
class Person {}
console.log(Person.info)
6.1 安装babel-loader相关的包
- 运行npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D命令
- 在webpack.config.js的module->rules数组中,添加loader规则如下:
module:{
// 所有第三方文件模块的匹配规则
rules: [
// 注意,必须使用exclude指定排除项,因为node_modules目录下的第三方包不需要打包
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
//
]
}
6.2 配置babel-loader
在项目根目录,创建名为babel.config.js的配置文件,定义babel的配置项如下:
module.exports = {
// 声明babel可用的插件
// 将来webpack在调用babel-loader的时候会先加载plugin插件来使用
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}
打包发布
1. ?
2. 配置webpack的打包发布
在package.json文件的scripts节点下,新增build命令如下:
{
"scripts": {
// 开发环境时,运行dev命令
"dev": "webpack server"
// 项目发布时,运行build命令
"build": "webpack --mode production"
}
}
- –model是一个参数项,用来指定webpack的运行模式。production代表生产环境,会对打包生成的文件进行代码压缩和性能优化。
- 通过–model指定的参数项,会覆盖webpack.config.js中的model选项
3. 把JavaScript文件统一生成到js目录中
在webpack.config.js的output中,进行如下配置:
module.exports = {
output: {
// 输出文件的存放路径
path: path.join(__dirname, './dist'),
// 输出文件的名称
filename: 'js/bundle.js'
}
}
4. 把图片文件统一生成到image目录中
在webpack.config.js的url-loader中,新增outputPath选项,如下配置:
module:{
// 所有第三方文件模块的匹配规则
rules: [
{ test: /\.jpg|png|gif$/, use: {
loader: 'url-loader',
options: {
limit: 22228,
outputPath: 'image'
}
} },
]
}
5. 自动清理dist目录下的旧文件
为了在每次发布时自动清理掉dist目录中的旧文件,可以安装并配置clean-webpack-plugin插件:
- 运行npm install --sava-dev clean-webpack-plugin命令
- 在webpack.config.js中,添加如下配置:
// 左侧的花括号是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
// 插件数组,将来webpack在运行时,会加载并调用这些插件
plugins: [htmlPlugin, new CleanWebpackPlugin()],
}
Source Map
1. ?
2. 什么是Source Map
Source Map就是一个信息文件,里面存储着位置信息,也就是说,Source Map文件存储着压缩后混淆后的代码,所对应的转换前的位置。
有了它,出错的时候,除错工具姜直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调试。
3. 默认Source Map配置
- 默认Source Map的问题
开发环境下默认生成的Source Map,记录的是生成后的代码的位置,会导致运行时报错的行数与源代码的行数不一致。 - 解决默认Source Map 的问题
开发环境下,推荐在webpack.config.js中,添加如下配置,即可保证运行时报错的行数与源代码的行数保持一致:
module.exports = {
mode: 'development',
devtool: 'eval-source-map'
}
注意:仅限在开发模式使用,不建议在生产模式下使用
4. webpack生产环境下的 Source Map
在生产环境下,如果省略了devtool选项,则最终生成的文件不包含Source Map,能够防止原始代码的暴露。
- 只定位行数不暴露源码
在生产环境下,如果只想定位报错的具体行数,且不想暴露源码,此时可以将devtool的值设置为nosources-source-map。 - 定位行数且暴露源码
在生产环境下,如果想定位报错的具体行数的同时,展示具体报错的源码,此时可以将devtool的值设置为source-map。
注意: 选择此选项后,你应该将你的服务器配置为,不允许普通用户访问source map文件!
5. Source Map 的最佳实践
- 开发环境下:
建议将devtool的值设置为eval-source-map
好处:可以精准定位到具体的错误行 - 生产环境下:
建议直接关闭source map或将devtool的值设置为nosources-source-map
好处:防止源码泄露,提高网站的安全性
在实际开发中,不需要自己配置webpack
拓展
@的使用
在平常我们导入其他js的文件,如下,在src/js/info.js中导入src/msg.js:
import msg from '../../msg.js'
- 建议大家使用 @,表示 src 源代码目录,从外往里查找,不要使用 …/ 从里往外找
import msg from '@/msg.js'
- 使用@前,在webpack.config.js中,添加如下配置:
module.exports = {
resolve: {
alias: {
// 告诉webpack,程序员写的 @ 代表 src 这一层目录
'@': path.join(__dirname, './src/')
}
}
}
END