Webpack 是一款前端代码打包工具，可以将多个模块的代码打包成一个文件，减少网络请求和提高页面加载速度，同时也有助于代码的组织和管理。Webpack4 是自 2018 年发布的最新版本，其中加入了许多新特性和改进，本文将对其进行介绍和使用方法的指导。
新特性介绍
1. 模式（mode）配置
Webpack 4 中引入了一个全新的 mode 配置选项，可设置为 development、production 或 none，默认为 production。该选项可以帮助开发者根据运行环境选择一些默认配置项，比如 development 模式可以自动开启 devtool、process.env.NODE_ENV，production 模式可以自动开启压缩等优化措施。
-- -------------------- ---- ------- -- ------ -------------- - - ----- ------------- -- --- - -- ------ -------------- - - ----- ------------ -- --- -
2. 零配置（Zero Configuration）
Webpack 4 中增加了「零配置」的功能，即默认配置。开发者在进行打包时无需手动添加 webpack.config.js 配置文件，Webpack 会自动检测项目中的入口和出口，并进行相应的打包，使得使用起来更加便捷。
3. 改进的性能
Webpack 4 进一步改进了性能，缩短了打包时间。新版本使用了更快的算法、改进的缓存等优化措施，使得打包速度提高了约 10%，同时减少了开发者的内存占用。
4. 代码分割（Code Splitting）
Webpack 4 中代码分割功能得到了升级。新版本引入了一个名为 splitChunks 的插件，可以帮助开发者将公共代码分离出来，生成单独的文件。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------------- -
------------ -
------- ------
----- ----
-
-
-5. 可以配置多页应用程序（Multiple Pages）
在 Webpack 4 中，开发者可以轻松配置多个入口和多个出口，以创建多个页面的应用程序。只需在配置文件中指定多个入口和出口的路径，Webpack 会自动对应打包生成多个文件。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
---- ---------------
------ ----------------
--
------- -
--------- -------------------
----- ----------------------- -------
-
-使用方法
1. 安装 Webpack 4
npm install webpack webpack-cli -D
2. 创建 webpack.config.js 配置文件
-- -------------------- ---- -------
-- -----------------
----- ---- - ---------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
-3. 添加 HTML 模板
Webpack 可以通过插件 html-webpack-plugin 自动生成 HTML 文件，并自动将生成的 JS 文件注入到 HTML 文件中。
npm install html-webpack-plugin -D
-- -------------------- ---- -------
-- -----------------
----- ----------------- - ------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- ---------------------
--
-
-4. 加入开发服务器
使用开发服务器能够方便地进行开发和调试，它可以在代码发生变化时重新加载页面。
npm install webpack-dev-server -D
// webpack.config.js
module.exports = {
devServer: {
contentBase: './dist'
}
}5. 使用 Babel 处理 ES6 代码
Babel 可以将 ES6 代码转换成 ES5 代码，使得 Webpack 可以打包处理。
npm install babel-loader @babel/core @babel/preset-env -D
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-总结
Webpack 4 与其前一版本相比，引入了许多新特性和改进，大大提升了开发者的开发效率和打包性能，如模式配置、零配置、改进的性能、代码分割、可配置多页应用程序等等。以上是其使用方法的简单介绍和实例代码，希望能够为前端开发者提供一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a10c4968c7c53b0c2ed5e