太原网站建设,企业网站开发php,什么叫网站建设服务,在html中做网站 视频前言#xff1a; 如何配置webpack呢#xff1f; webpack概念有哪些呢#xff1f; 怎么快速理解并使用webpack呢#xff1f; 文章目录一. 什么是webpack二. 安装webpack三. webpack的五个核心概念四. webpack配置五. loader加载器1. css处理2. 处理文件#xff08;图片 如何配置webpack呢 webpack概念有哪些呢 怎么快速理解并使用webpack呢 文章目录一. 什么是webpack二. 安装webpack三. webpack的五个核心概念四. webpack配置五. loader加载器1. css处理2. 处理文件图片文件3. 处理sass新添加六. plugin插件1. html模板插件2. 清理dist目录3. 抽出插件(新添加七. devServe八. 特殊标识九. 优化新增加1. css 压缩2.js的压缩十. 目录别名(新增加十一. 开发工具(新增加十二 . webpack的魔法注释(新添加十三. 哈希命名(新增加1. contenthash2. chunkhash3. hash十四. 环境变量(新增加十五. 不要vue脚手架如何搭建项目(新增加1. 安装2. 配置3.js一. 什么是webpack
webpack是一个前端打包工具用来处理现代前端错综复杂的依赖关系生成浏览器可以识别的静态资源。解释一下什么叫依赖关系就是A插件需要B插件B插件有D插件 F插件又需要A插件Vue前期脚手架就是用webpack制作 。Vue 开始推荐vite构建工具更快现在react脚手架 angular等现代框架的脚手架都是依赖webpack
二. 安装webpack
执行下图的步骤进行安装 cd / 进入根目录 md pack 创建pack文件夹 cd pack 进入pack文件夹 npm init -y 初始化项目 npm i webpack webpack-cli -D 安装webpack与脚手架 三. webpack的五个核心概念
entry 入口 入口就是项目运行的起点 告诉webpack从哪开始打包output 出口 出口就是打包好放入哪 filename 文件名 path路径mode 模式 产品模式production 开发模式developmentloader 加载器 webpack默认只能加载处理js文件 loader让webpack拥有处理其他文件的能力plugin 插件 在webpack运行生命周期过程中做一些其他任务压缩 清理
四. webpack配置 默认webpack.config.js配置文件中 新建配置文件webpack.config.js,可以把mode设置为产品模式productionpackage.json配置serve就可以用npm run serve 运行
五. loader加载器
1. css处理 (1)安装npm i css-loader style-loader -D(2)作用css-loader 处理.css文件 style-loader 把css加载到style标签内module:{ rules:[ {test:/\.css$/,use:[style-loader,css-loader]} ] }2. 处理文件图片文件 (1)安装npm i file-loader url-loader -D(2)作用加载图片与文件{test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,use:[{ loader:url-loader, options:{limit:5000,name:images/[hash].[ext]}, }]},没有安装之前我们文件夹引入的图片会报错 安装之后,我们插入的图片会在页面正常显示dist文件夹里面会自动更新出我们刚才的图片images。当图片小于5000字节的时候 转换为base64 小图片减少一次http请求 ;
//设置内容
icon.innerHTML span classiconfont icon-check-circle/spanspan classiconfont icon-close-circle/span
//插入div icon
document.body.append(icon)3.导入图标的css import url(font/iconfont.css); 4.npm run build 就可以出现字体图标了然后dist文件夹也会出现font文件夹
3. 处理sass新添加
(1)安装 npm i sass sass-loader -D 注意安装的是sass,写scss后期会报错 (2)作用处理scss文件 (3){test:/\.scss$/,use:[style-loader,css-loader,sass-loader]}
六. plugin插件
1. html模板插件
(1) 安装npm i html-webpack-plugin -D(2) 作用生成html模板文件自动把打包好的js插入到模板文件
(3) 在webpack.confing.js导入 const HtmlWebpackPluginrequire(html-webpack-plugin)(4) plugins:[ new HtmlWebpackPlugin({ template:./public/index.html }) ],1.新建一个public文件夹把index.html移入public不要script标签里的js 就是一个html文件,里面什么都不用写 2.安装html插件 3.配置文件里面进行配置 4. 最后npm run serve 5. 发现dist文件夹里面多了index.html ( script标签上多了deferdefer延迟)
2. 清理dist目录 (1) 安装npm i clean-webpack-plugin -D(2)作用打包前删除dist目录(3)const {CleanWebpackPlugin}require(clean-webpack-plugin)(4) plugins:[new CleanWebpackPlugin()]npm run build 运行项目 我们没有写清理dist目录时需要每次运行前删除dist文件夹这样很麻烦。于是我们安装了清理dist目录的plugin插件。这里为了更直观的看到这个插件起作用了我们把main.js后面添加了hash运行npm run build 发现dist目录的main后面多了一长串的值。这样就可以看出清理dist目录起作用了。3. 抽出插件(新添加
(1)安装 npm i mini-css-extract-plugin -D (2)作用把css抽出为一个单独的文件 (3)导入 const MiniCssExtractPlugin require(mini-css-extract-plugin) (4)配置loader {test:/\.css$/,use:[MiniCssExtractPlugin.loader,css-loader]} (5)实例化插件 new MiniCssExtractPlugin() 可以自定义文件名下图表示的用哈希值取前七位 img.cn/3c4257f214c64fa788aa5c5f567265ad.png)
七. devServe
(1)安装 npm i webpack-dev-serve -D (2)作用开启一个本地服务器 open:true 是否自动打开浏览器 host:“localhost” 域名 port:8080 端口号 hot:true 更新文件保存网页自动更新 package.json script:(“serve”:webpack serve} npm run serve 运行项目里 1.安装 npm i webpack-dev-server -D 2.配置serve:webpack serve 2. 运行npm run serve 会自动打开
八. 特殊标识 [hash] 把内容通过hash算法算出来的一串字符 [hash:7] 取hash字符串前7个 [name] 原文件名称 [ext] 文件的后缀名 九. 优化新增加
1. css 压缩
1安装npm i css-minimizer-webpack-plugin -D 2导入const CssMinimizerPlugin require(css-minimizer-webpack-plugin);
2.js的压缩
(1)安装npm i terser-webpack-plugin -D (2)导入const TerserPlugin require(terser-webpack-plugin); (3)实现压缩与优化 optimization: {minimize: true, //默认是压缩minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],//压缩器},(4)代码分割 optimization: {splitChunks: {chunks: all, // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}十. 目录别名(新增加
resolve: {// 别名代表是 src目录
alias: {: path.resolve(__dirname, ./src),}},十一. 开发工具(新增加
devtool:eval-cheap-source-map,
作用错误与源代码有个一一对应关系link与script script defer src“” /script 等待页面内容加载好再去加载js link href “” relprefetch 提前预加载css 十二 . webpack的魔法注释(新添加
魔法注释 /* webpackChunkName:jquery */
给当前的js 文件命名/* webpackPrefetch: true */
网络有空闲预加载jsimport(/* webpackChunkName:jquery , webpackPrefetch: true */ jquery).then(({default:$}){console.log($);})十三. 哈希命名(新增加
1. contenthash
内容发生变化 contenthash值才发送变化
2. chunkhash
入口发生变化当前的文件chunkhashhash会变化
3. hash
只要项目内容发送变化hash就会变化 01 可以控制浏览器的缓存 当文件发生变化时候hash就变化文件名也就变化浏览器就不缓存 当文件名保持不变浏览器二次请求会从缓存里面去请求内容 02 提供二次加载的速度有效的控制缓存 十四. 环境变量(新增加
配置通过环境命令 产品环境 压缩代码是生产环境不压缩代码打开devtool项目开发中 产品环境 baseURL http://dida100.com:8888 生产环境 baseURL http://localhost:8080步骤 1.npm i cross-env -D 2.package.json 传参 build: cross-env NODE_ENVproduction webpack, serve: cross-env NODE_ENVdevelopment webpack serve, 3. webpack.config.js使用 mode:process.env.NODE_ENV, devtool:process.env.NODE_ENVproduction?false:eval-cheap-source-map, 4. js文件中使用 var baseURL ; if(process.env.NODE_ENVproduction){ baseURL http://dida100.com; }else{ baseURL http://localhost } console.log(当前环境,process.env.NODE_ENV,baseURL);
十五. 不要vue脚手架如何搭建项目(新增加
面试中经常会问到
1. 安装 npm i vue -Snpm i vue-loader vue-template-compiler vue-hot-reload-api vue-style-loader -D处理.vue vue-loader 编译vue目录 vue-template-compiler 热更新 vue-hot-reload-api 处理vue 样式vue-style-loader
2. 配置
01 导入 const {VueLoaderPlugin} require(vue-loader) 02 配置 {test:/\.vue$/,use:[vue-loader]} 03 插件 plugins:[new VueLoaderPlugin()]
3.js
(1) 模板文件 public/main.html div idapp/div (2) main.js import { createApp } from vue;//导入App.vue ·import App from ./App.vue; console.log(App); reateApp(App).mount(#app)//创建App并挂载 (3) App.vue
template divh1你好Vue3/h1 /div
/template 以上就是今天的全部内容啦如果对您有用不要忘了一键三连哦
