webpack
webpack的基本使用(了解即可)
什么是webpack
概念:webpack是前端项目工程化的具体解决方案
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆,处理浏览器端JavaScript的兼容性,性能优化等强大的功能
好处:让程序员把工作的重心放到具体功能的实现上,提高开发效率
webpack使用前的准备
- 新建项目空白目录,并运行
npm init -y,初始化包管理配置文件package.json - 新建src源代码目录
- 新建src->index.html首页和src->index.js脚本文件
- 初始化首页基本的结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>我是第1 个小li</li>
<li>我是第2 个小li</li>
<li>我是第3 个小li</li>
<li>我是第4 个小li</li>
<li>我是第5 个小li</li>
<li>我是第6 个小li</li>
<li>我是第7 个小li</li>
<li>我是第8 个小li</li>
<li>我是第9 个小li</li>
<li>我是第10 个小li</li>
</ul>
<img src="" alt="" class="box1"/>
</body>
</html>
- 运行
npm i jquery命令,安装jQuery - 通过ES6模块化的方式导入jQuery,列表隔行变色效果
import $ from 'jquery'
$(function() {
$('li:odd').css('background-color', 'pink')
$('li:even').css('background-color', 'red')
})
- 安装webpack
npm i webpack webpack-cli -D
webpack的配置文件
在项目根目录中,创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置
module.exports = {
// 开发模式
mode:'development',// production
}
在package.json的scripts节点下,新增dev脚本如下:
"scripts": {
"dev": "webpack",
},
在终端中运行npm run dev命令,启动webpack进行项目的打包构建
在webpack的4.x和5.x版本中,有如下默认约定
- 默认的打包入口文件为src->index.js
- 默认的输出文件路径为dist->main.js
注意:可以在webpack.config.js中修改打包的默认约定
自定义打包的入口和出口
在webpack.config.js文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口
const path = require('path')
module.exports = {
entry:path.join(__dirname, '/src/index.js'),
output: {
path:path.join(__dirname, '/dist'),
filename:'js/bundle.js'
},
}
安装配置webpack-dev-server
- 运行如下代码
npm i webpack-dev-server -D
修改package.json->scripts中的dev命令如下:
"scripts": {
"dev": "webpack serve",
},
再次运行npm run dev命令,重新进行项目的打包
在浏览器中访问http://127.0.0.1:8080/地址,查看自动打包效果
注意:webpack-dev-server会启动一个实时打包的http服务器
安装配置html-webpack-plugin
- 运行如下命令:
npm i html-webpack-plugin -D - 配置html-webpack-plugin:修改webpack.config.js文件如下
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
//要复制哪个文件
template: './src/index.html',
// 复制在哪里
filename: './index.html'
})
module.exports = {
// 开发模式
mode:'development',
// 使用
plugins: [htmlPlugin],
}
devServer节点
在webpack.config.js文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置
module.exports = {
devServer: {
open: true,// 初次打包生成完成后,自动打开浏览器
port: 8080,// 实时打包使用的端口
host: '127.0.0.1'// 实时打包所使用的地址
},
}
loader概述
在实际开发过程中,webpack默认只能打包处理以js后缀名结尾的模块,其他类型的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错
loader加载器的作用:协助webpack打包处理特点的模块,比如
- css-loader:可以打包处理CSS文件
- less-loader:可以打包处理LESS文件
- babel-loader:可以打包处理webpack无法处理的高级JavaScript语法
打包处理CSS文件
- 运行
npm i style-loader css-loader -D命令,安装处理CSS文件的loader - 在webpack.config.js文件中,添加loader规则如下:
module.exports = {
module: {
rules: [
// css加载器
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
]
}
}
其中,test表示要处理的文件类型,use表示对应要调用的loader
use数组中指定的loader顺序是固定的,多个loader的调用顺序是从后往前调用
打包处理LESS文件
- 运行
npm i less-loader less -D - 在webpack.config.js中,添加loader规则如下:
module.exports = {
module: {
rules: [
// css加载器
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
// less加载器
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
]
}
}
打包处理样式表中与URL路径相关的文件
- 运行
npm i url-loader file-loader -D命令 - 在webpack.config.js文件中,添加loader规则如下:
module.exports = {
module: {
rules: [
// css加载器
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
// less加载器
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
// 处理图片结尾的文件
{
test: /\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 200,
outputPath: 'image',
}
}
},
]
}
}
index.js内容如下:
import $ from 'jquery'
//导入图片 得到图片文件
import logo from '@/image/01.jpg'
// 设置属性值
$(".box1").prop("src",logo)
$(function() {
$('li:odd').css('background-color', 'pink')
$('li:even').css('background-color', 'red')
})
打包处理JS文件中的高级语法
webpack只能打包处理一部分高级JavaScript语法,对于那些webpack无法处理的高级js语法,需要借助于babel-loader进行打包处理,例如webpack无法处理下面的JavaScript代码
// 定义一个装饰器
function info(target) {
target.info = 'Person info'
}
// 定义一个普通的类
@info
class Person {}
// 打印Person的静态属性info
console.log(Person.info)
运行如下的命令安装对应的依赖包
npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
在webpack.config.js文件中,添加loader规则如下:
module.exports = {
module: {
rules: [
// css加载器
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
// less加载器
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
// 处理图片结尾的文件
{
test: /\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 200,
outputPath: 'image',
}
}
},
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
}
]
}
}
在项目根目录下,创建名为babel.config.js的配置文件,定义babel的配置项如下
module.exports = {
// 声明babel可用的插件
plugins: [['@babel/plugin-proposal-decorators',{legacy: true}]]
}
配置webpack的打包发布
在package.json文件的scripts节点下,新增build命令如下:
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production",
},
–mode是一个参数项,用来指定webpack的运行模式,production代表生产环境会对打包生成的文件进行代码压缩和性能优化
注意:通过–mode指定的参数项,会覆盖webpack.config.js中的mode选项
自动清理dist目录下的旧文件
为了在每次打包发布时自动清理掉dist目录下的旧文件,可以安装并配置clean-webpack-plugin插件:
安装命令npm i clean-webpack-plugin -D
webpack.config.js文件如下:
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
module.exports = {
plugins: [htmlPlugin, cleanPlugin],
}
Source Map
Source Map就是一个信息文件,里面存储着位置信息,也就是说,Source Map存储着压缩混淆后的代码,所对应转换前的位置
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,极大方便了我们的调试
配置Source Map
开发环境下,推荐在webpack.config.js文件中添加如下的配置,即可保证运行时错误的行数和源代码的行数保持一致
module.exports = {
mode:'development',
// devtool: 'nosources-source-map',// 生产环境下
devtool: 'eval-source-map',
}
在生产环境下,如果省略了devtool选项,则最终生成的文件中不包含Source Map,这能防止原始代码通过Source Map的形式暴露
实际开发中需要我们自己配置webpack吗?不需要,所以了解即可
webpack.config.js中配置@符号
module.exports = {
resolve: {
alias: {
'@': path.join(__dirname, './src/')
}
}
}
文章介绍了webpack的基本概念、主要功能和使用前的准备,包括初始化项目、安装配置及打包过程。详细讲解了webpack配置文件的创建、自定义打包入口和出口,以及webpack-dev-server和html-webpack-plugin的配置。此外,还涉及CSS、LESS、图片和高级JS语法的打包处理,以及SourceMap的配置。最后提到了在不同模式下打包发布项目的方法。

被折叠的 条评论
为什么被折叠?



