webpack基础

mode: ‘production’,

}

• 运行指令：webpack

6. js语法检查

最新的webpack5没有eslint-loader

• 概述:对js基本语法错误/隐患，进行提前检查

• 安装loader(webpack5文档里已经没有这个loader了)

• npm install eslint-loader eslint -D

• 备注：在eslint中文官网查看配置和规则

• 配置loader（rules的一个对象）

module.exports = {

// …

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

loader: “eslint-loader”,

//options: {

// eslint options (if necessary)

//}

}

]

}

// …

};

• 修改package.json(需要删除注释才能生效、参考vue配置不写在options里)

“eslintConfig”:{

“parserOptions”: {

“ecmaVersion”:6,//支持es6

“sourceType”:“module”//使用es6模块化

},

“env”:{//设置环境

“browser”:true,//支持浏览器环境：能够使用window上的全局变量

“node”:true//支持服务器环境:能够使用node上global的全局变量

},

“globals”:{//声明使用的全局变量，这样即使没有定义也不会报错了

"$":"readonly"///$只读变量

},

“rules”:{//eslint检查的规则 0忽略 1警告 2错误

“no-console”:0,//不检查console

“eqeqeq”:2，//用而不用=就报错

“no-alert”:2//不能使用alert

},

“extends”:“eslint:recommended”//使用eslint推荐的默认规则

}

• 运行指令：webpack

7. js语法转换

• 概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容处理

• 安装loader

• npm install babel-loader @babel/core @babel/preset-env -D

{

test: /.m?js$/,

//test: /.js$/,

exclude: /node_modules/,

use: {

loader: ‘babel-loader’,

options: {

presets: [‘@babel/preset-env’]

}

},

}

• 运行指令：webpack

8. js兼容性处理

最新的bable已经删除polyfill

第一种方法：使用经典的polyfill

• 安装包

• npm install @babel/polyfill

• 使用

//入口文件

import ‘@babel/polyfill’;//包含ES6的高级语法的转换，不管用了哪些新语法，全部的新语法都转换了

• 优点：解决babel只能转换部分低级语法问题，（如：let/const/解构赋值。。。），引入polyfill可以转换高级语法（如：Promise）

• 缺点：将所有高级语法都进行了转换，实际上可能只使用了一部分

• 解决：需要按需加载（使用了什么高级语法，就转换什么，而其他的不转换）

第二种方法：借助按需引入core-js按需引入

• 安装包

• npm install core-js

• 配置loader

{

// test: /.m?js$/,

test: /.js$/,

exclude: /node_modules/,

use: {

loader: ‘babel-loader’,

options: {

presets: [

[

‘@babel/preset-env’,

{

useBuiltIns: ‘usage’, //按需引入需要使用polyfill

corejs: {

version: 3//解决warning

},

targets: { //指定兼容性处理哪些浏览器

“chrome”: ‘58’,

“ie”: “9”

}

}

]

],

// cacheDirectory: true,//开启babel缓存

}

},

}

9. 打包样式文件中的图片资源

最新的webpack5没有file-loader、没有url-loader

• 概述：图片文件webpack不能解析，需要借助loader编译解析

• 添加2张图片：一张小于8kb、一张大于8kb

• 通过背景图方式引入图片

• 安装loader

• npm install file-loader url-loader -D

• 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

• 配置loader

{

test: /.(png|jpg|gif)$/,

use: [

{

loader: ‘url-loader’,

options: {

limit:8192,//8kb–>8kb以下的图片会base64处理

outputPath:‘images’,//决定文件本地输出路径

publicPath:‘…/build/images’//决定图片的url路径

name:‘[hash:8].[ext]’//修改文件名称hash值取8位[ext]文件扩展名

},

},

],

},

• 运行指令：webpack

10. 打包html文件

• 概述：html文件webpack不能解析，需要借助插件编译解析

• 注意不要在html中引入任何css和js文件

• 安装插件Plugins

• npm install html-webpack-plugin -D

• 在webpack.config.js中引入插件（插件都要手动引入，而loader会自动加载）

• const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

• 配置插件Plugins

plugins:[

new HtmlWebpackPlugin({

template:‘./src/index.html’,//以当前文件为模板创建新的HTML（1.结构和原来一样，2.会自动引入打包的资源）

})

]

• 运行指令：webpack

11. 打包html中图片资源

• 概述：html中的图片url-loader没法处理，它只能处理js中引入的图片/样式中图片，不能处理html中img标签，需要引入其他html-loader处理

• 安装loader

• npm install html-loader -D

• 配置loader

{

test: /.html$/i,

loader: “html-loader”,

},

• 运行指令：webpack

12. 打包其他资源

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取

中…(img-hsibuf8s-1713591268255)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-SKHljCxk-1713591268256)]

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取

[外链图片转存中…(img-07fK1dop-1713591268256)]

[外链图片转存中…(img-jjsV0TFz-1713591268256)]

[外链图片转存中…(img-hMLVY3Sj-1713591268256)]

[外链图片转存中…(img-bmNpk8zO-1713591268257)]