企业网页制作与网站设计,网站错误页面模板,视频网站建设报价单,百度网站优化工具#x1f49d;#x1f49d;#x1f49d;欢迎来到我的博客#xff0c;很高兴能够在这里和您见面#xff01;希望您在这里可以感受到一份轻松愉快的氛围#xff0c;不仅可以获得有趣的内容和知识#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小… 欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。 ✨✨ 欢迎订阅本专栏 ✨✨ 前言
本文将详细地讲解webpack的基础入门知识如果对大家有帮助请一键三连哦! 目录
1.Webpack
2.Webpack 修改入口和出口
3. Webpack 自动生成 html 文件
4.Webpack-打包 css 代码
5. 优化-提取 css 代码
6. 优化压缩过程
7. Webpack-打包 less 代码
8. Webpack-打包 less 代码
9. Webpack-打包图片
10.Webpack 搭建开发环境
11. Webpack 打包模式
12.Webpack 打包模式的应用
13.Webpack 前端注入环境变量 14.Webpack 开发环境调错 source map
15.Webpack 设置解析别名路径
16.Webpack 多页面打包 1.Webpack
1.Webpack 是一个静态模块打包工具从入口构建依赖图打包有关的模块最后用于展示你的内容
2.静态模块编写代码过程中的htmlcss js图片等固定内容的文件
3.打包过程注意只有和入口有直接/间接引入关系的模块才会被打包
4.Webpack 的作用把静态模块内容压缩这个和转译等前端工程化
步骤
1.新建项目文件夹 Webpack_study初始化包环境得到 package.json 文件
npm init -y
2.新建 src 源代码文件夹书写代码包括 utils/check.js 封装用户名和密码长度函数引入到 src/index.js 进行使用
src/utils/check.js
// 封装校验手机号长度和校验验证码长度的函数
export const checkPhone phone phone.length 11
export const checkCode code code.length 6
src/index.js
/*** 目标1体验 webpack 打包过程*/
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from ../utils/check.js
console.log(checkPhone(13900002020))
console.log(checkCode(123123123123))
// 1.2 准备 webpack 打包的环境
// 1.3 运行自定义命令打包观察效果npm run 自定义命令 3.下载 webpack webpack-cli 到项目版本独立
npm i webpack webpack-cli --save-dev 注意虽然 webpack 是全局软件包封装的是命令工具但是为了保证项目之间版本分别独立所以这次比较特殊下载到某个项目环境下但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令作为局部命令使用 4.项目中运行工具命令采用自定义命令的方式局部命令
npm run build
npm run 自定义命令名字
注意实际上在终端运行的是 build 右侧的具体命名
5.自动产生 dist 分发文件夹压缩和优化后用于最终运行的代码 2.Webpack 修改入口和出口 Webpack 配置影响 Webpack 打包过程 步骤 项目根目录新建 Webpack.config.js 配置文件 导出配置对象配置入口出口文件路径别忘了修改磁盘文件夹和文件的名字
const path require(path)module.exports {entry: path.resolve(__dirname, src/login/index.js),output: {path: path.resolve(__dirname, dist),filename: ./login/index.js }
} 3.重新打包观察 3. Webpack 自动生成 html 文件 1.插件 html-webpack-plugin 作用在 Webpack 打包时生成 html 文件并引入其他打包后的资源
2.步骤
1.下载 html-webpack-plugin 本地软件包到项目中
npm i html-webpack-plugin --save-dev
2.配置 webpack.config.js 让 Webpack 拥有插件功能
// ...
const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {// ...plugins: [new HtmlWebpackPlugin({template: ./public/login.html, // 模板文件filename: ./login/index.html // 输出文件})]
} 指定以 public/login.html 为模板复制到 dist/login/index.html并自动引入其他打包后资源 运行打包命令观察打包后 dist 文件夹下内容并运行查看效果 4.Webpack-打包 css 代码 注意Webpack 默认只识别 JS 和 JSON 文件内容所以想要让 Webpack 识别更多不同内容需要使用加载器 介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码 加载器 css-loader解析 css 代码 加载器 style-loader把解析后的 css 代码插入到 DOMstyle 标签之间 步骤 准备 css 文件引入到 src/login/index.js 中压缩转译处理等
/*** 目标5打包 css 代码* 5.1 准备 css 代码并引入到 js 中* 5.2 下载 css-loader 和 style-loader 本地软件包* 5.3 配置 webpack.config.js 让 Webpack 拥有该加载器功能* 5.4 打包后观察效果*/
// 5.1 准备 css 代码并引入到 js 中
import bootstrap/dist/css/bootstrap.min.css
import ./index.css
注意这里只是引入代码内容让 Webpack 处理不需定义变量接收在 JS 代码中继续使用所以没有定义变量接收 下载 css-loader 和 style-loader 本地软件包
npm i css-loader style-loader --save-dev
配置 webpack.config.js 让 Webpack 拥有该加载器功能
// ...module.exports {// ...module: { // 加载器rules: [ // 规则列表{test: /\.css$/i, // 匹配 .css 结尾的文件use: [style-loader, css-loader], // 使用从后到前的加载器来解析 css 代码和插入到 DOM}]}
};
打包后运行 dist/login/index.html 观察效果看看准备好的样式是否作用在网页上 5. 优化-提取 css 代码 需求让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中 需要mini-css-extract-plugin 插件来实现 步骤
下载 mini-css-extract-plugin 插件软件包到本地项目中
npm i --save-dev mini-css-extract-plugin
配置 webpack.config.js 让 Webpack 拥有该插件功能
// ...
const MiniCssExtractPlugin require(mini-css-extract-plugin)module.exports {// ...module: {rules: [{test: /\.css$/i,// use: [style-loader, css-loader]use: [MiniCssExtractPlugin.loader, css-loader],},],},plugins: [// ...new MiniCssExtractPlugin()]
}; 打包后观察效果 注意不能和 style-loader 一起使用 好处css 文件可以被浏览器缓存减少 JS 文件体积让浏览器并行下载 css 和 js 文件
6. 优化压缩过程 需求把提出的 css 文件内样式代码压缩 需要css-minimizer-webpack-plugin 插件来实现 步骤 // ...
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);module.exports {// ...// 优化optimization: {// 最小化minimizer: [// 在 webpack5 中你可以使用 ... 语法来扩展现有的 minimizer即 // terser-webpack-plugin将下一行取消注释保证 JS 代码还能被压缩处理...,new CssMinimizerPlugin(),],}
};
下载 mini-css-extract-plugin 插件软件包到本地项目中
npm i css-minimizer-webpack-plugin --save-dev
配置 webpack.config.js 让 Webpack 拥有该插件功能
// ...
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);module.exports {// ...// 优化optimization: {// 最小化minimizer: [// 在 webpack5 中你可以使用 ... 语法来扩展现有的 minimizer即 // terser-webpack-plugin将下一行取消注释保证 JS 代码还能被压缩处理...,new CssMinimizerPlugin(),],}
};
打包后观察 css 文件内自己代码是否被压缩了 7. Webpack-打包 less 代码 需求把提出的 css 文件内样式代码压缩 需要css-minimizer-webpack-plugin 插件来实现 步骤
下载 mini-css-extract-plugin 插件软件包到本地项目中
npm i css-minimizer-webpack-plugin --save-dev
配置 webpack.config.js 让 Webpack 拥有该插件功能
// ...
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);module.exports {// ...// 优化optimization: {// 最小化minimizer: [// 在 webpack5 中你可以使用 ... 语法来扩展现有的 minimizer即 // terser-webpack-plugin将下一行取消注释保证 JS 代码还能被压缩处理...,new CssMinimizerPlugin(),],}
};
8. Webpack-打包 less 代码 加载器 less-loader把 less 代码编译为 css 代码还需要依赖 less 软件包 步骤
新建 login/index.less 文件设置背景图样式图片在配套资料-素材文件夹中
html {body {background: url(./assets/login-bg.png) no-repeat center/cover;}
} less 样式引入到 src/login/index.js 中
/*** 目标8打包 less 代码* 8.1 新建 less 代码设置背景图并引入到 src/login/index.js 中* 8.2 下载 less 和 less-loader 本地软件包* 8.3 配置 webpack.config.js 让 Webpack 拥有功能* 8.4 打包后观察效果*/
// 8.1 新建 less 代码设置背景图并引入到 src/login/index.js 中
import ./index.less
下载 less 和 less-loader 本地软件包
npm i less less-loader --save-dev 配置 webpack.config.js 让 Webpack 拥有功能
// ...module.exports {// ...module: {rules: [// ...{test: /\.less$/i,use: [MiniCssExtractPlugin.loader, css-loader, less-loader]}]}
} 9. Webpack-打包图片 资源模块Webpack 内置了资源模块的打包无需下载额外 loader 步骤 配置 webpack.config.js 让 Webpack 拥有打包图片功能 占位符 【hash】对模块内容做算法计算得到映射的数字字母组合的字符串 占位符 【ext】使用当前模块原本的占位符例如.png / .jpg 等字符串 占位符 【query】保留引入文件时代码中查询参数只有 URL 下生效 注意判断临界值默认为 8KB 大于 8KB 文件发送一个单独的文件并导出 URL 地址 小于 8KB 文件导出一个 data URIbase64字符串 在 src/login/index.js 中给 img 标签添加 logo 图片
/*** 目标9打包资源模块图片处理* 9.1 创建 img 标签并动态添加到页面配置 webpack.config.js* 9.2 打包后观察效果和区别*/
// 9.1 创建 img 标签并动态添加到页面配置 webpack.config.js
// 注意js 中引入本地图片资源要用 import 方式如果是网络图片http地址字符串可以直接写
import imgObj from ./assets/logo.png
const theImg document.createElement(img)
theImg.src imgObj
document.querySelector(.login-wrap).appendChild(theImg) 配置 webpack.config.js 让 Webpack 拥有打包图片功能
// ...module.exports {// ...module: {rules: [// ...{test: /\.(png|jpg|jpeg|gif)$/i,type: asset,generator: {filename: assets/[hash][ext][query]}}]}
} 10.Webpack 搭建开发环境 每次改动代码都要重新打包很麻烦所以这里给项目集成 webpack-dev-server 开发服务器 作用启动 Web 服务打包输出源码在内存并会自动检测代码变化热更新到网页 步骤:
下载 webpack-dev-server 软件包到当前项目
npm i webpack-dev-server --save-dev
配置自定义命令并设置打包的模式为开发模式
// ...module.exports {// ...mode: development
}
scripts: {// ...dev: webpack serve --modedevelopment
}, 使用 npm run dev 来启动开发服务器访问提示的域名端口号在浏览器访问打包后的项目网页修改代码后试试热更新效果
在 js / css 文件中修改代码保存后会实时反馈到浏览器 11. Webpack 打包模式 打包模式告知 Webpack 使用相应模式的内置优化 分类 模式名称模式名字特点场景开发模式development调试代码实时加载模块热替换等本地开发开发模式production压缩代码资源优化更轻量等打包上线 如何设置影响 Webpack呢
方式1在 webpack.config.js 配置文件设置 mode 选项
// ...module.exports {// ...mode: production
}
方式2在 package.json 命令行设置 mode 参数
scripts: {build: webpack --modeproduction,dev: webpack serve --modedevelopment
}, 注意命令行设置的优先级高于配置文件中的推荐用命令行设置 体验在 build 命令后 修改 mode 的值打包输出观察打包后的 js 文件内容
12.Webpack 打包模式的应用 需求在开发模式下用 style-loader 内嵌更快在生产模式下提取 css 代码 方案1webpack.config.js 配置导出函数但是局限性大只接受 2 种模式 方案2借助 cross-env 跨平台通用包命令设置参数区分环境 方案3配置不同的 webpack.config.js 适用多种模式差异性较大情况 主要使用方案 2 尝试其他方案可以结合点击跳转的官方文档查看尝试 步骤
下载 cross-env 软件包到当前项目
npm i cross-env --save-dev
配置自定义命令传入参数名和值会绑定到 process.env 对象下 在 webpack.config.js 区分不同环境使用不同配置
module: {rules: [{test: /\.css$/i,// use: [style-loader, css-loader],use: [process.env.NODE_ENV development ? style-loader : MiniCssExtractPlugin.loader, css-loader]},{test: /\.less$/i,use: [// compiles Less to CSSprocess.env.NODE_ENV development ? style-loader : MiniCssExtractPlugin.loader,css-loader,less-loader,],}],}, 重新打包观察两种配置区别
13.Webpack 前端注入环境变量 需求前端项目中开发模式下打印语句生效生产模式下打印语句失效 问题cross-env 设置的只在 Node.js 环境生效前端代码无法访问 process.env.NODE_ENV 解决使用 Webpack 内置的 DefinePlugin 插件 作用在编译时将前端代码中匹配的变量名替换为值或表达式 配置 webpack.config.js 中给前端注入环境变量
// ...
const webpack require(webpack)module.exports {// ...plugins: [// ...new webpack.DefinePlugin({// key 是注入到打包后的前端 JS 代码中作为全局变量// value 是变量对应的值在 corss-env 注入在 node.js 中的环境变量字符串process.env.NODE_ENV: JSON.stringify(process.env.NODE_ENV)})]
}
14.Webpack 开发环境调错 source map source map可以准确追踪 error 和 warning 在原始代码的位置 问题代码被压缩和混淆无法正确定位源代码位置行数和列数 设置webpack.config.js 配置 devtool 选项
// ...module.exports {// ...devtool: inline-source-map
} inline-source-map 选项把源码的位置信息一起打包在 JS 文件内 注意source map 适用于开发环境不要在生产环境使用防止被轻易查看源码位置
15.Webpack 设置解析别名路径 解析别名配置模块如何解析创建 import 或 require 的别名来确保模块引入变得更简单 例如
原来路径如下
import { checkPhone, checkCode } from ../src/utils/check.js
配置解析别名在 webpack.config.js 中设置
// ...const config {// ...resolve: {alias: {: path.resolve(__dirname, src)}}
} 这样我们以后引入目标模块写的路径就更简单了
import { checkPhone, checkCode } from /utils/check.js 修改代码的路径后重新打包观察效果是否正常
16.Webpack 多页面打包 概念单页面单个 html 文件切换 DOM 的方式实现不同业务逻辑展示后续 Vue/React 会学到 多页面多个 html 文件切换页面实现不同业务逻辑展示 需求把黑马头条-数据管理平台-内容页面一起引入打包使用 步骤 准备源码htmlcssjs放入相应位置并改用模块化语法导出 下载 form-serialize 包并导入到核心代码中使用 配置 webpack.config.js 多入口和多页面的设置 // ...
const config {entry: {模块名1: path.resolve(__dirname, src/入口1.js),模块名2: path.resolve(__dirname, src/入口2.js),},output: {path: path.resolve(__dirname, dist),filename: ./[name]/index.js }plugins: [new HtmlWebpackPlugin({template: ./public/页面2.html, // 模板文件filename: ./路径/index.html, // 输出文件chunks: [模块名2]})new HtmlWebpackPlugin({template: ./public/页面2.html, // 模板文件filename: ./路径/index.html, // 输出文件chunks: [模块名2]})]
}
总结
1.本文讲了什么是webpack
2.webpack的使用
3.webpack关于打包的相关知识
4.webpack关于环境的配置 ❤️❤️❤️小郑是普通学生水平如有纰漏欢迎各位大佬评论批评指正 如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢!
