2024年最新你真的了解webpack了吗？（webpack的基本使用--上）(1)，必看的70道面试题回答

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

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

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

webpack.config.js

const HtmlWebpackPlugin = require(‘html-webpack-plugin’); // 通过 npm 安装

const webpack = require(‘webpack’); // 用于访问内置插件

module.exports = {

module: {

rules: [

{

test: /.css$/,

use: [‘style-loader’, ‘css-loader’]

}

],

},

plugins: [new HtmlWebpackPlugin({ template: ‘./src/index.html’ })],

};

模式（mode）

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {

mode: ‘production’,

};

浏览器兼容性（browser compatibility）

Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。

环境（environment）

Webpack 5 运行于 Node.js v10.13.0+ 的版本。

webpack基本使用

---

1、首先，全局安装webpack

npm install -g webpack webpack-cli

2、初始化项目

创建webpack-project文件夹，进入，执行命令

npm init -y

安装依赖

npm install

创建src文件夹，在文件夹里面创建main.js文件

在根目录创建一个index.html

这个时候需要使用webpack.config.js来构建（打包）为bundle.js

在根目录创建webpack.config.js

const path = require(“path”); //Node.js内置模块

module.exports = {

entry: ‘./src/main.js’, //配置入口文件

output: {

path: path.resolve(__dirname, ‘./dist’), //输出路径，__dirname：当前文件所在路径

filename: ‘bundle.js’ //输出文件

}

}

直接执行webpack进行打包，会有警告

查看文档，在打包时候指定当前模式

我们使用模式为开发环境进行打包，没有警告

webpack --mode=development

也可以配置项目的npm运行命令，修改package.json文件

直接执行

npm run build

打包成功，查看目录结构，与webpack.config.js的出口指定路径、文件名一致

将index.html内容修改成如下，引入刚刚打好的包

在浏览器打开index.html，验证打包成功

多入口文件，在多页面应用中，每个页面拥有不同的入口文件，用这个就非常管用了。

在src文件夹下新增other.js

document.write(‘

Other content

’)

修改webpack.config.js，注意入口文件变成了多个，出口文件变成对应的js，如bundle1.js

const path = require(“path”); //Node.js内置模块

module.exports = {

entry: {

//配置多入口文件’

bundle1:‘./src/main.js’,

bundle2:‘./src/other.js’

},

output: {

path: path.resolve(__dirname, ‘./dist’), //输出路径，__dirname：当前文件所在路径

filename: ‘[name].js’ //输出文件

}

}

然后执行打包命令

npm run build

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

[外链图片转存中…(img-BJwtZSSr-1715741795147)]