webpack:第三方模块打包工具
- 作用：减少项目文件数量，减少代码体积，提高浏览器的访问速率
- 1、初始化环境
- 1.1、创建文件夹-npmtest（不能用中文和特殊字符命名）
- 1.2、语法：npm init -y 初始化环境，得到package.json（记录下载过的第三方依赖包，模块）文件
- 1.3、语法：npm install webpack webpack-cli -D，下载webpack和webpack-cli
- 1.4、添加配置打包命令:在package.json文件——scripts标签中——添加 “build”: “webpack”
//1、在package.json文件中配置 "build": "webpack"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"，
"build": "webpack",//配置webpack打包
},
- 2、使用webpack打包
- 2.1、在npmtest文件夹下创建src文件夹并创建一个main.js作为打包的入口文件
- 2.2、其他需要参与打包的模块文件等，只需引入到main.js文件中，并使用，就能参与打包
- 2.3、打包语法：npm run build (这里的build对应1.4的添加 “build”: “webpack”，build可自定义名称)
- 2.4、在npmtest文件夹创建webpack.config.js的文件用于配置打包入口等
//配置入口
const path = require('path')
module.exports = {
entry: './src/main.js',//需要打包的入口文件
output: {//打包的出口文件配置
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
}
}
- 2.5、执行2.4完成后会自动生成dist文件夹，里面保存的是打包后的代码
//2、在main.js文件中引入打包的文件路径进行打包
// 引入css样式，让webpack进行打包
// 引入样式的es6语法：import css文件路径
import "./css/index.css"
// 引入less，让webpack进行打包
import "./less/index.less"
plugin插件
- 作用：自动打包生成HTML文件
- 1、用法：
- 1.1、在npmtest目录下安装，安装命令语法：html-webpack-plugin
- 1.2、在webpack.config.js文件中配置
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//设置开发环境
mode: "development",
entry: './src/main.js',
//配置自动打包HTML
plugins: [
new htmlWebpackPlugin({
template: './public/index.html'
})
]}
加载器loader
- 作用：webpack默认只能处理js文件，需要打包其他类型的文件需要用到加载器
- 1、css文件处理
- 下载语法：npm install css-loader style-loader -D
- 1.1、style-loader:将css样式插入到DOM中，style-loader:让ewbpack能处理css文件
- 1.2、在webpack.config.js文件中配置
module.exports = {
//-----其他配置
module: {
//需要处理什么类型的文件只需要在rules下添加规则即可
rules: [{
//1、配置处理css文件
test: /\.css$/i, // 正则表达式 表示匹配以.css结尾的文件 ，i 表示不区分大小写
// 注意：这两个加载的书写顺序不能改变
use: ['style-loader', 'css-loader'] // 表示用我们下载的两个加载器来处理css文件
}]
}
}
- 2、less文件处理
- 下载语法：npm install less less-loader -D
- 2.1、less-loader作用: 识别less文件，less作用: 将less编译为css
- 2.2、在webpack.config.js针对less配置
module.exports = {
//-----其他配置
module: {
//需要处理什么类型的文件只需要在rules下添加规则即可
rules: [{
//1、配置处理css文件
test: /\.css$/i, // 正则表达式 表示匹配以.css结尾的文件 ，i 表示不区分大小写
// 注意：这两个加载的书写顺序不能改变
use: ['style-loader', 'css-loader'] // 表示用我们下载的两个加载器来处理css文件
},
{ // 2、处理less文件
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}]
}
}
-
2.3、在src目录下创建一个less目录再新建一个index.less文件做测试，把less文件通过地址引入在main.js入口文件中（配置打包文件）
-
3、处理图片文件
- 下载语法：不需要用到加载器，用到了webpack5的asset module（资源模块）技术
- 3.1、只需要在webpack.config.js针对图片配置即可
module.exports = {
//-----其他配置
module: {
//需要处理什么类型的文件只需要在rules下添加规则即可
rules: [{
//1、配置处理css文件
test: /\.css$/i, // 正则表达式 表示匹配以.css结尾的文件 ，i 表示不区分大小写
// 注意：这两个加载的书写顺序不能改变
use: ['style-loader', 'css-loader'] // 表示用我们下载的两个加载器来处理css文件
},
{ // 2、处理less文件
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{ // 3、处理图片
test: /\.(png|jpg|gif|jpeg)$/i,
// 利用webpack5的asset module技术实现webpack处理图片
// 当图片小于8kb的时候，将图片转base64打包进js代码中
// 大于8kb，直接输入文件
type: 'asset'
}]
}
}
- 4、字体图标处理
- 下载语法：不需要用到加载器，用到了webpack5的asset module（资源模块）技术
- 4.1、只需要在webpack.config.js针对字体图标配置即可
module.exports = {
//-----其他配置
module: {
//需要处理什么类型的文件只需要在rules下添加规则即可
rules: [{
//1、配置处理css文件
test: /\.css$/i, // 正则表达式 表示匹配以.css结尾的文件 ，i 表示不区分大小写
// 注意：这两个加载的书写顺序不能改变
use: ['style-loader', 'css-loader'] // 表示用我们下载的两个加载器来处理css文件
},
{ //2、处理less文件
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{ //3、处理图片
test: /\.(png|jpg|gif|jpeg)$/i,
// 利用webpack5的asset module技术实现webpack处理图片
// 当图片小于8kb的时候，将图片转base64打包进js代码中
// 大于8kb，直接输入文件
type: 'asset'
}，
{ //4、处理字体图标文件
test: /\.(eot|svg|tff|woff|woff2)$/,
type: 'asset/resource',
generator: {
// [name]：表示获取到文件的原名字
// [hash:6]: 表示生成6位数的哈希值
// hash(哈希): 由字母和数字构成的随机字符串
// 就叫哈希值
// [ext]: 表示获取原文件的后缀名
// 对打包后的字体图标文件进行重命名
filename: 'font/[name].[hash:6][ext]',
}
}]
}
}
- 5、语法降级处理
- 下载语法：npm install babel-loader @babel/preset-env -D(前面下载了就直接在webpack.config.js配置即可)
- 5.1、只需要在webpack.config.js针对语法降级处理配置即可
module.exports = {
//-----其他配置
module: {
//需要处理什么类型的文件只需要在rules下添加规则即可
rules: [{
//1、配置处理css文件
test: /\.css$/i, // 正则表达式 表示匹配以.css结尾的文件 ，i 表示不区分大小写
// 注意：这两个加载的书写顺序不能改变
use: ['style-loader', 'css-loader'] // 表示用我们下载的两个加载器来处理css文件
},
{ //2、处理less文件
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{ //3、处理图片
test: /\.(png|jpg|gif|jpeg)$/i,
// 利用webpack5的asset module技术实现webpack处理图片
// 当图片小于8kb的时候，将图片转base64打包进js代码中
// 大于8kb，直接输入文件
type: 'asset'
}，
{ //4、处理字体图标文件
test: /\.(eot|svg|tff|woff|woff2)$/,
type: 'asset/resource',
generator: {
// [name]：表示获取到文件的原名字
// [hash:6]: 表示生成6位数的哈希值
// hash(哈希): 由字母和数字构成的随机字符串
// 就叫哈希值
// [ext]: 表示获取原文件的后缀名
// 对打包后的字体图标文件进行重命名
filename: 'font/[name].[hash:6][ext]',
}
},
{ //5、语法降级处理
test: /\.js$/,
// 排除不需要降级处理的js文件，
// 比如我们下载在node_modules文件中的第三方包
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"]
}
}
}]
}
}
开发服务器的使用
- 作用：节省每次打包的时间，代码运行在内存中, 自动更新, 实时返回给浏览器显示
- 也是第三方包：webpack-dev-sever
- 1、使用：
- 1.1、下载模块包语法：npm install webpack-dev-server -D
- 1.2、在package.json里的scripts标签中配置开发服务器的启动命令 serve
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",//配置webpack打包
"serve": "webpack serve"//配置开发服务器的启动命令 serve(看自定义命名)
},
- 1.3、启动当前工程的webpack开发服务器：npm run serve
- 1.4、重新编写修改代码，根据运行npm run serve后的服务器地址打开，即可完成
- 2、修改开发服务器端口号
- 2.1、在webpack.config.js针对修改开发服务器端口号配置即可
- 2.2、注意这个配置是在module同级下（兄弟关系）
module.exports = {
//-----其他配置
module: {
//需要处理什么类型的文件只需要在rules下添加规则即可
rules:{ [ ]
}
},
// devServer 就是专门用来设置开发服务器相关的配置的地方
devServer: {
port: 3000 // 设置端口号为3000
}
入口配置main.js文件代码部分
// 案例1：实现隔行换色功能
let ali = document.querySelectorAll('li')
for(let i =0;i<ali.length;i++){
if(i%2==0){
ali[i].style.color = "green"
}else{
ali[i].style.color = "red"
}
}
// 案例2：实现在htm了页面中显示格式YYYY-MM-DD日期
// 要求：利用moment插件实现日期格式化
// let h1 = document.querySelector('h1')
// let curDate = new Date()
// 格式化日期 下载npm i moment 然后引入
// 注意：html页面不能直接引用该js文件，因为浏览器还不支持es6的import form的语法
// 因此我们需要打包文件，然后引入打包后js文件
import moment from "moment"
curDate = moment(curDate).format("YYYY-MM-DD")
// 设置显示的日期
h1.innerHTML = "当前日期：" + curDate
// 总结：打包后的插件是如何能够生效？答：因为打包的时候会把插件一起打包到dist/main.js中
// 引入css样式，让webpack进行打包
// 引入样式的es6语法：import css文件路径
import "./css/index.css"
// 引入less，让webpack进行打包
import "./less/index.less"
// 引入图片 让webpack打包
// 默认情况下 webpack不能处理图片
import logo from './assets/logo_small.png'
let img = document.createElement("img") // 创建img标签
img.src = logo // 设置图片路径
document.body.appendChild(img) // 将img标签插入到body元素里面去
// 引入字体图标样式 让webpack打包
import './assets/fonts/iconfont.css'
let i = document.createElement('i')
i.className = "iconfont icon-qq"
document.body.appendChild(i)
// 写一个箭头函数，测试语法降级处理
const test = ()=>{
console.log(888);
}
console.log(test)
/**
*
* 模块化开发
* 所有的第三方模块我都不需要像之前那样通过script标签使用，而是
* 通过es6的模块化方式引入使用插件。
*
* */
文件目录部分
注：以上内容是学习总结，发现有错的欢迎各位大佬指出！
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
