Day12-1-Webpack前端工程化开发

Webpack前端工程化

1 案例-webpack打包js文件

1 在index.html中编写代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>把字符串倒序并转大写</h3>
    <input id="msg" type="text">
    <button id="btn">转换</button>
    <h3 id="result"></h3>
</body>
</html>

2 创建StringChange.js文件

3 在index.js中引入StringChange.js中的函数,并编写如下代码

4 运行打包命令

复制代码
npm run build

5 查看打包后的js文件

2 案例-webpack打包css

创建index.css文件,并写点样式代码

在index.js中导入index.css文件

打包完成后,会自动将css代码放在html中

3 案例-webpack打包SCSS文件

4 案例-webpack打包图片文件

5 案例-webpack打包静态文件

1 取消如下注释

2 static文件夹下一定要有文件,否则打包失败

一般会在static目录下面存放

----images //你不想打包的图片

----libs //第三方的插件,比如动画插件

6 案例-打包阿里 icon图标库

1 把下载好的图标库复制到项目中

2 在index.js中导入图标库

3 下载file-loader插件

复制代码
npm i file-loader@6.2.0

4 在webpack.base.config.js中配置字体的打包规则

js 复制代码
 //配置字体文件的打包规则
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: {
                  loader: 'file-loader',
                  options: {
                    outputPath: 'fonts/'
                  }
                }
            }

7-案例-移动端适配-flexible

1 下载flexible插件

复制代码
npm i lib-flexible

2 在index.js中导入flexible插件

复制代码
import "lib-flexible"
相关推荐
右子13 分钟前
理解响应式设计—理念、实践与常见误解
前端·后端·响应式设计
KaiSonng15 分钟前
【前端利器】这款轻量级图片标注库让你的Web应用瞬间提升交互体验
前端
二十雨辰19 分钟前
vite性能优化
前端·vue.js
明月与玄武20 分钟前
浅谈 富文本编辑器
前端·javascript·vue.js
paodan21 分钟前
如何使用ORM 工具,Prisma
前端
布列瑟农的星空1 小时前
重学React——memo能防止Context的额外渲染吗
前端
FuckPatience1 小时前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js
小小前端_我自坚强1 小时前
前端踩坑指南 - 避免这些常见陷阱
前端·程序员·代码规范
lichenyang4531 小时前
从零实现JSON与图片文件上传功能
前端
WebGirl1 小时前
动态生成多层表头表格算法
前端·javascript