Webpack 是一个功能强大的 JavaScript 模块打包工具，它可以将多个模块打包成一个文件，以便于在浏览器中加载。在前端开发中，我们经常需要使用一些第三方库，如 jQuery、React、Vue 等。Webpack 可以将这些第三方库打包成一个文件，以便于我们在项目中使用。
打包第三方库
Webpack 可以通过配置文件来打包第三方库。在配置文件中，我们可以通过 externals 属性来指定需要打包的第三方库。例如，我们需要打包 jQuery：
// webpack.config.js
module.exports = {
// ...
externals: {
jquery: 'jQuery'
}
};在上面的配置中，我们将 jquery 指定为第三方库，并将它的全局变量名设置为 jQuery。这样，在打包时，Webpack 就会忽略掉 jquery，并将它作为一个全局变量引入到项目中。
如果第三方库是一个 CommonJS 或者 AMD 模块，我们可以通过指定它的模块名称来打包它。例如，我们需要打包 Moment.js：
// webpack.config.js
module.exports = {
// ...
externals: {
moment: 'moment'
}
};在上面的配置中，我们将 moment 指定为第三方库，并将它的模块名称设置为 moment。这样，在打包时，Webpack 就会将 moment 打包成一个 CommonJS 或者 AMD 模块，并将它作为一个模块引入到项目中。
代码分割
代码分割是指将一个大的代码库分割成多个小的代码块，以便于在需要时动态加载。Webpack 可以通过配置文件来实现代码分割。在配置文件中，我们可以通过 optimization.splitChunks 属性来指定代码分割的规则。例如，我们需要将项目中的公共代码打包成一个独立的文件：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------------- -
------------ -
------- ------
----- --------
-
-
--在上面的配置中，我们通过 optimization.splitChunks.chunks 属性来指定需要分割的代码块类型，all 表示所有类型的代码块都需要分割。通过 optimization.splitChunks.name 属性来指定分割出来的文件名，common 表示公共文件。
在项目中，我们可以通过 import() 函数动态加载分割出来的文件。例如，我们需要动态加载公共文件：
// index.js
import('./common.js').then(common => {
// ...
});在上面的代码中，我们使用 import() 函数来动态加载分割出来的公共文件。当需要使用公共代码时，Webpack 将会自动加载并执行公共文件中的代码。
示例代码
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
------ ----------------
--
------- -
--------- ------------
----- --------- - -------
--
---------- -
------- ---------
------- --------
--
------------- -
------------ -
------- ------
----- --------
-
-
---- -------------------- ---- ------- -- -------- ------ - ---- --------- ------ ------ ---- --------- --------------------------------- -- - --------------- -------------------- -------------------- ---
// common.js import $ from 'jquery'; import moment from 'moment'; console.log($); console.log(moment);
在上面的示例中，我们使用 Webpack 打包了 jquery 和 moment 两个第三方库，并将公共代码打包成一个独立的文件。在 index.js 中，我们使用 import() 函数动态加载公共文件，并打印出 jquery、moment 和 common 三个变量。在 common.js 中，我们也打印出了 jquery 和 moment 两个变量。当我们运行打包后的代码时，可以看到控制台输出了这些变量的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d394e8a941bf71346d41e4
