more 注释之前的内容被视为文章摘要。
大约 5 分钟约 1495 字
Gitee主页
伙伴详细介绍
GitHub主页
进入博主GitHub主页
博主微信
微信号：IT-1997
博主QQ
微信号：785311186
168wangxiao-ui
基于Element-ui二次封装
Javascript 基础 （中）
1. 谈谈 script标签中 defer 和 async 属性的区别。
2. 列举几种类型的 DOM 节点
3. encodeURL() 和 decodeURL()？
4. 为什么不建议在 JavaScript 中使用 innerHTML ？
5. 如何在不支持 JavaScript 的旧浏览器中隐藏 JavaScript 代码？
小于 1 分钟约 68 字
前言
依赖环境
- Node 版本 16+
前置知识
- 对 Node 各个核心模块操作有一定认识。比如：fs、path、os 等
- 对 React 和 Vue 有一定认识，并且开发过项目。
小于 1 分钟约 201 字
基本使用
webpack是一个静态资源打包工具。 它会以 一个 或 多个文件 作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将webpack输出的文件叫做bundle
功能介绍
Webpack本身功能是有限的:
大约 2 分钟约 480 字
基本配置
在开始使用 webpack 之前，我们需要对 webpack 的配置有一定的认识。
1. 大核心概念
- entry(入口)：Webpack 从哪个文件开始打包
- output(输出)：Webpack 打包完的文件输出到哪里去，如何命名等
- loader(加载器)：webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
- plugins(插件)：扩展 Webpack 的功能
- mode(模式)：主要由两种模式:
- 开发模式:
development - 生产模式:
production
- 开发模式:
大约 1 分钟约 352 字
webpack 对资源的处理
一、处理样式
学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源
介绍
Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源
大约 8 分钟约 2292 字
修改输出文件路径
1. 修改 js 的文件位置
- 配置
const path = require("path")
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
/** 入口文件打包输出之后的文件名及文件位置 */
filename: "static/js/main.js"
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"]
},
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "less-loader"]
},
{
test: /\.styl$/i,
use: ["style-loader", "css-loader", "stylus-loader"]
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 600*1024, // 600kb
}
},
}
]
},
mode: "development",
}
小于 1 分钟约 286 字
开发服务器 & 自动化
每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化（热更新）
1. 下载包
npm install webpack-dev-server -D
小于 1 分钟约 126 字
...