网站开发架构分类,管理手机网站首页,淘宝seo关键词的获取方法有哪些,网站建设明细报价什么是webpack
webpack是一个静态资源打包工具#xff0c;它会以一个或者多个文件作为打包的入口#xff0c;将整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件#xff0c;可以在浏览器端运行。一般将 webpack 输出的文件称为 bandle 。 …什么是webpack
webpack是一个静态资源打包工具它会以一个或者多个文件作为打包的入口将整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件可以在浏览器端运行。一般将 webpack 输出的文件称为 bandle 。
webpack 本身的功能也是有限的一共有两种模式
开发模式仅能编译js中 ES Module 语法。 生产模式可以编译js中 ES Module 语法还可以压缩 js 代码。
为什么需要打包工具
开发时一般会使用框架、ES6模块化语法、css预处理器等语法进行开发这样的代码如果想在浏览器运行必须经过编译成为浏览器能识别的 js、css 等语法后才能运行。 打包工具就是用来编译代码的。同时还可以压缩代码、做兼容性处理、提升代码性能等。
目前一些常用的打包工具
Grunt、Gulp、Parcel、Webpack、Vite 等等。 npm 和 npx
npm是用来下载包的
npx 是将node_modules文件夹中的 .bin 目录临时添加为环境变量这样就可以访问该环境变量下的应用程序
npx的作用如下
1.默认情况下首先检查路径中是否存在要执行的包即在项目中
2.如果存在它将执行
3.若不存在意味着尚未安装该软件包npx将安装其最新版本然后执行它
假设有一个名为my-package的软件包想要执行它。
好吧若没有npx要执行一个软件包必须通过其本地路径运行来完成如下所示
./node_modules/bin/my-package
或在 package.json文件的 scripts section中将其定义为单独的脚本如下所示
{name:something,version: 1.0.0,scripts: {my-package:./node_modules/bin/my-package}
}
然后使用npm run my-package运行。
现在运用npx只需运行npx my-package.即可轻松实现此目的。 webpack的配置有哪些核心概念
webpack有5大核心概念
1. entry入口指示Webpack从哪个文件开始打包。 2. output输出指示Webpack打包完的文件输出到哪里如何命名等。 3. loader加载器webpack本身只能处理 js、json等资源其他资源需要借助 loader 才能解析。 4. plugins插件扩展webpack的功能。 5. mode模式开发和生产两种模式 development/production。
⚠️注意output 中的 path 是全部文件的输出路径但 filename指的只是入口文件输出后的路径。 cleantrue设置打包前清空
webpack.config.js 文件
const path require(path) //固定写法 node中的核心模块专门用来处理路径问题//依赖于node中的common.js模块化
module.exports {//入口entry:./src/main.js,//相对路径//出口 文件的输出路径 一个对象 包含路径和文件名output:{// __dirname node.js中的变量 用来表示当前文件的文件夹目录path:path.resolve(__dirname,dist),//绝对路径filename:main.js,clean:true,//自动清空上次打包的内容其实就是在打包前将整个path目录进行清空再打包},//loader 加载器module:{rules:[//loader的配置],},//plugin 插件plugins:[//plugin的配置],//模式mode:development//或 production
} 什么是开发模式 如何处理样式资源
如果需要webpack进行打包那么必须在入口文件进行引入。
css/less/sass/stylus 都有自己对应的loader不同的是如果使用预处理器预处理器的loader会先将预处理器处理为css文件然后再继续执行即将css代码编译成commonjs模块放入js再将js中的css文件通过创建style标签的方式加入到html中。
1.npm install 需要下载的loader 2.配置方式/内联方式不推荐
在webpack.config.js中进行配置
module.exports {module: {rules: [{ test: /\.css$/, //只检测.css文件//执行顺序为从右到左从下至上use: [style-loader,//将js中css文件通过创建style标签添加到html中生效css-loader//将css代码编译为common.js模块放到js中]},],},
};
3.将需要打包的资源在入口文件引入。
如何进行图片和字体图标处理
webpack4 中通过 file-loader 和 url-loader 进行图片资源的处理但是在 webpack5 中已经将两个 loader 内置到 webpack 中了只需要简单配置。
项目中的图片优化 习惯将小于10kb的图片转换为base64DataUri减少请求减轻服务器压力。 对于过大的图片不适合转为base64因为转为base64文件体积会变大越大的图片增加的体积越大导致整体页面的加载速度变慢。
module.exports {module: {rules: [{ test: /\.(png|jpg|gif)$/, //需要查看的图片后缀type:asset,parser:{dataUrlCondition:{//小于10kb的图片转换为base64maxSize:10*1024,//10kb},],},
};
处理字体图标资源
此时不需要进行 base64 的转换type 类型也是 asset 下的 resource
module.exports {module: {rules: [{ test: /\.(ttfwoff2?)$/, //需要查看的图片后缀type:asset/resource,//也是可以设置generator的值generator:{filename:static/media/[hash]/[ext]/[query],}],},
};
怎样操作输出文件的打包目录
当我们希望打包出来的文件不是全部堆砌在.dist目录下希望进行 js/image 的分级目录时
output中更改 js 输出后的文件路径
output:{path:path.resolve(__dirname,dist),//绝对路径filename:static/js/main.js,},
module下 rule 中和 asset 同级定义generator
module: {rules: [{ test: /\.(png|jpg|gif)$/, //需要查看的图片后缀type:asset,parser:{dataUrlCondition:{//小于10kb的图片转换为base64maxSize:10*1024,//10kb},generator:{//输出的图片名称//hash指的是打包完成后图片会被打包为一串字母数字此值即为hash值//hash值如果觉得太长可以设置为[hash:10],为只取前十位//ext 指的是文件后缀名filename:static/image/[hash]/[ext]/[query],}],},
此时.dist目录下会有一个static文件夹static文件夹下有两个文件夹js文件夹下是打包好的入口文件image文件夹下是打包好的图片资源。
