Webpack4 是前端项目开发中不可或缺的强大工具，它能够对项目中的各种资源进行打包、压缩、优化等操作，从而提高前端项目的性能和稳定性。Webpack4 默认提供了大量配置选项，但是如果你想要进一步优化你的项目并且满足特定的需求，就要学习如何进行高级配置。
安装
在开始之前，你需要先安装 Webpack4：
npm install webpack webpack-cli --save-dev
同时，建议安装 webpack-dev-server，它可以在本地运行一个开发服务器，并且能够自动刷新页面：
npm install webpack-dev-server --save-dev
高级配置
以下是一些常用的高级配置：
1. 多入口配置
在项目中，有时候我们需要同时打包多个入口文件，可以使用 entry 配置来实现：
-- -------------------- ---- -------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
--------- ------------
----- --------- - -------
-
-上面的配置将会编译成两个文件：app.js 和 vendor.js，输出到 dist 目录中。
2. 第三方库分离
有些第三方库比较大且不太容易被修改，可以将它们从主要的应用程序逻辑中分离出来。可以使用 splitChunksPlugin 插件来将第三方库从主要应用程序逻辑中分离出来，这样可以缓存和并行加载应用程序代码和服务器端生成的 HTML/CSS/JS。
-- -------------------- ---- -------
-------------- - -
------------- -
------------ -
------------ -
------- -
----- -------------------------
----- ----------
------- -----
-
-
-
-
-3. 静态资源路径配置
在开发时，我们需要在本地开一个服务器来测试前端项目，需要配置相对路径，让服务器能够找到资源。这时，可以使用 publicPath 来配置资源路径：
module.exports = {
output: {
publicPath: '/'
}
}4. 使用 resolve.alias 配置简写路径
在使用某些库时，我们需要写较长的路径来引用它，这时可以使用 resolve.alias 来配置简写路径，使其更加方便。
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}5. 模块路径配置
有时候，在编写代码时需要引用另一个文件夹中的模块，可以使用 resolve.modules 配置模块路径：
module.exports = {
resolve: {
modules: ['node_modules', 'src']
}
}这样可以在代码中使用 import 或 require 语句时不写完整路径，只写模块名即可。
示例代码
以下是一个完整的 Webpack4 配置示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
------ -
---- ---------------
------- -----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- ---------------------
--- -------------------
--------- ------------------
--
--
------------- -
------------ -
------------ -
------- -
----- -------------------------
----- ----------
------- -----
-
-
-
--
-------- -
------ -
------- ---------------------
--
-------- ---------------- ------
-
--总结
Webpack4 是前端项目开发中不可或缺的强大工具，掌握高级配置可以使项目更加高效、便捷。以上介绍的高级配置只是冰山一角，希望本文能够为读者提供一些指导和启示，让你更加了解 Webpack4 的配置和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2e8dde974a253eb8a439e