2024年前端最新Webpack配置详解——这一篇就够用了，高级面试题+解析

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

运行指令： webpack

js兼容性处理

================================================================

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

安装包

npm install @babel/polyfill

使用

app.js

import ‘@babel/polyfill’; // 包含ES6的高级语法的转换

优点

解决babel只能转换部分低级语法的问题(如：let/const/解构赋值…)，引入polyfill可以转换高级语法(如:Promise…)

缺点

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

解决

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

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

安装包

npm install core-js

配置loader

{

test: /.js$/,

exclude: /(node_modules)/,

use: {

loader: ‘babel-loader’,

options: {

presets: [

[

‘@babel/preset-env’,

{

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

corejs: { version: 3 }, // 解决warn

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

“chrome”: “58”,

“ie”: “9”,

}

}

]

],

cacheDirectory: true, // 开启babel缓存

}

}

},

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

=====================================================================

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

添加2张图片:

• 小图, 小于8kb: src/images/vue.png

• 大图, 大于8kb: src/images/react.jpg

• 在less文件中通过背景图的方式引入图片

安装loader

npm install file-loader url-loader --save-dev

补充

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] hash值取8位 [ext] 文件扩展名

}

}

},

运行指令： webpack

打包html文件

=================================================================

概述：

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

添加html文件

src/index.html

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

安装插件Plugins

npm install html-webpack-plugin --save-dev

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

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

配置插件Plugins

plugins: [

new HtmlWebpackPlugin({

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

}),

]

运行指令： webpack

打包html中图片资源

====================================================================

概述：

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

添加图片

在src/index.html添加两个img标签

安装loader

npm install html-loader --save-dev

配置loader

{

test: /.(html)$/,

use: {

loader: ‘html-loader’

}

}

运行指令： webpack

打包其他资源

===============================================================

概述：

其他资源webpack不能解析，需要借助loader编译解析

添加字体文件

• src/media/iconfont.eot

• src/media/iconfont.svg

• src/media/iconfont.ttf

• src/media/iconfont.woff

• src/media/iconfont.woff2

修改样式

@font-face {

font-family: ‘iconfont’;

src: url(‘…/media/iconfont.eot’);

src: url(‘…/media/iconfont.eot?#iefix’) format(‘embedded-opentype’),

url(‘…/media/iconfont.woff2’) format(‘woff2’),

url(‘…/media/iconfont.woff’) format(‘woff’),

url(‘…/media/iconfont.ttf’) format(‘truetype’),

url(‘…/media/iconfont.svg#iconfont’) format(‘svg’);

}

.iconfont {

font-family: “iconfont” !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

配置loader

{

test: /.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理其他资源

loader: ‘file-loader’,

options: {

outputPath: ‘media’,

name: ‘[hash:8].[ext]’

}

}

运行指令： webpack

自动编译打包运行

=================================================================

安装loader

npm install webpack-dev-server --save-dev

详细配置见官网：指南 -> 开发环境 -> 使用webpack-dev-server

修改webpack配置对象（注意不是loader中）

devServer: {

open: true, // 自动打开浏览器

compress: true, // 启动gzip压缩

port: 3000, // 端口号

}

修改url-loader部分配置

• 因为构建工具以build为根目录，不用再找build了

• publicPath: '../build/images/' --> publicPath: 'images/'

修改package.json中scripts指令

“start”: “webpack-dev-server”,

运行指令： npm run start

注意webpack-dev-server指令才能启动devServer配置，然后配置到package.json中才行

热模替换功能

===============================================================

概述：

热模块替换（HMR）是webpack提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新（只更新变化的模块，不变的模块不更新）。

详细配置见官网：指南 -> 模块热替换

修改devServer配置

devServer: {

contentBase: resolve(__dirname, ‘build’), // 运行项目的目录

open: true, // 自动打开浏览器

compress: true, // 启动gzip压缩

port: 3000, // 端口号

hot: true // 开启热模替换功能 HMR

}

问题： html文件无法自动更新了，需要增加一个入口

entry: [‘./src/js/app.js’,‘./src/index.html’]

devtool

================================================================

概述：

一种将压缩/编译文件中的代码映射回源文件中的原始位置的技术，让我们调试代码不在困难

详细配置见官网：配置 -> devtool

介绍

cheap 只保留行, 编译速度快

eval webpack生成的代码（每个模块彼此分开，并使用模块名称进行注释）, 编译速度快

inline 以base64方式将source-map嵌入到代码中，缺点造成编译后代码体积很大

推荐使用：

开发环境： cheap-module-eval-source-map

生产环境： cheap-module-source-map

以上就是webpack开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。

准备生产环境

===============================================================

创建文件夹config

将webpack.config.js复制两份

• ./config/webpack.dev.js

• ./config/webpack.prod.js

• 修改webpack.prod.js配置，删除webpack-dev-server配置

// / 代表根路径(等价于这个：http://localhost:5000/)，以后项目上线所有路径都以当前网址为根路径出发

module.exports = {

output: {

path: resolve(__dirname, ‘…/build’), // 文件输出目录

filename: ‘./js/built.js’, // 文件输出名称

publicPath: ‘/’ // 所有输出资源在引入时的公共路径，若loader中也指定了publicPath，会以loader的为准。

},

module: {

rules: [

{

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

use: {

loader: ‘url-loader’,

options: {

limit: 8192,

outputPath: ‘images’,

publicPath: ‘/images’, // 重写publicPath，需要在路径前面加上 /

name: ‘[hash:8].[ext]’

}

}

},

]

},

mode: ‘production’, //修改为生产环境

devtool: ‘cheap-module-source-map’ // 修改为生产环境的错误提示

// 删除devServer

}

修改package.json的指令

“start”: “webpack-dev-server --config ./config/webpack.dev.js”

“dev”: “webpack-dev-server --config ./config/webpack.dev.js”

“build”: “webpack --config ./config/webpack.prod.js”

开发环境指令

npm start

npm run dev

生产环境指令

npm run build

注意: 生产环境代码需要部署到服务器上才能运行 （serve这个库能帮助我们快速搭建一个静态资源服务器）

npm i serve -g

serve -s build -p 5000

清除打包文件目录

=================================================================

概述：

每次打包生成了文件，都需要手动删除，引入插件帮助我们自动删除上一次的文件

安装插件

npm install clean-webpack-plugin --save-dev

引入插件

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);

// 注意要解构赋值！！！

配置插件

new CleanWebpackPlugin() // 自动清除output.path目录下的文件

运行指令： npm run build

提取css成单独文件

===================================================================

安装插件

npm install mini-css-extract-plugin --save-dev

引入插件

const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

配置loader

{

test: /.less$/,

use: [

MiniCssExtractPlugin.loader,

‘css-loader’,

‘less-loader’,

]

}

配置插件

new MiniCssExtractPlugin({

filename: “css/[name].css”,

})

运行指令

npm run build

serve -s build

添加css兼容

================================================================

安装loader

npm install postcss-loader postcss-flexbugs-fixes postcss-preset-env postcss-normalize autoprefixer --save-dev

配置loader

{

test: /.less$/,

use: [

MiniCssExtractPlugin.loader,

‘css-loader’,

{

loader: ‘postcss-loader’,

options: {

ident: ‘postcss’,

plugins: () => [

require(‘postcss-flexbugs-fixes’),

require(‘postcss-preset-env’)({

autoprefixer: {

flexbox: ‘no-2009’,

},

stage: 3,

}),

require(‘postcss-normalize’)(),

],

sourceMap: true,

},

},

‘less-loader’,

]

}

添加配置文件: .browserslistrc

last 1 version

1%

IE 10 # sorry

运行指令：

npm run build

serve -s build

压缩css

==============================================================

安装插件

npm install optimize-css-assets-webpack-plugin --save-dev

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素