介绍
在现代后端开发中，通常使用模块化打包工具。 其中，Webpack是一个功能强大且应用广泛的工具。 本文将介绍如何使用Webpack进行模块化打包和优化。
安装Webpack
在开始之前，我们需要先安装Webpack。 它可以通过npm或yarn安装。 打开命令行工具，执行以下命令进行全局安装：
npm install -g webpack
或者使用纱线：
yarn global add webpack
安装完成后，可以在命令行输入webpack -v 查看已安装的Webpack版本。
创建项目并初始化
mkdir my-webpack-project
cd my-webpack-project
接下来，我们需要初始化一个新的 npm 项目。 执行以下命令，根据提示填写项目信息：
npm init
这将生成一个 package.json 文件，其中包含我们项目的信息和依赖项。
配置Webpack
在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
在前面的配置中，我们指定了入口文件index.js和输出文件bundle.js的路径。 同时我们还定义了一些模块处理规则webpack模块化代码，比如使用Babel进行ES6翻译，使用CSSLoader和StyleLoader处理样式文件。
写代码
现在我们可以开始编写我们的应用程序了。 在项目的根目录创建一个名为 src 的目录，并在其中创建一个名为 index.js 的文件和一个名为 styles.css 的文件。
索引.js
javascript复制代码
import { sum } from './math';
console.log(sum(2, 3));
数学.js
javascript复制代码
export function sum(a, b) {
return a + b;
}
样式.css
body {
background-color: #f1f1f1;
}
在前面的示例中，我们定义了一个 sum 函数并导入它，然后在 index.js 中引入该函数并调用它。 我们还创建了一个简单的 CSS 文件 styles.css。
打包并运行
现在，我们可以使用Webpack进行打包了。 打开命令行工具，进入项目根目录，运行以下命令：
webpack
这将执行 Webpack 的默认配置文件 webpack.config.js 并将代码捆绑到 dist/bundle.js 中。
最后，我们可以在浏览器中打开index.html，导入打包好的bundle.js文件，查看控制台输出。 您应该能够看到数字 5。
优化
在实际项目中，我们通常需要进行一些优化。 以下是一些常见的优化配置示例：
生产环境
为了在生产中获得更小的构建，我们可以使用 mode 选项来启用 Webpack 的优化。 在 webpack.config.js 文件中webpack模块化代码，将配置更改为如下所示：
module.exports = {
// ...
mode: 'production',
// ...
};
代码点````
module.exports={//...优化:{splitChunks:{chunks:'all'}},//...};
在上面的配置中，我们使用了 Webpack 的优化功能来将公共模块拆分成单独的文件，以减小生成的 bundle 文件的大小。
### 文件压缩
为了进一步减小文件大小，我们可以使用 Webpack 的插件来压缩 JavaScript 和 CSS。首先，安装两个插件：
```bash
npm install --save-dev terser-webpack-plugin optimize-css-assets-webpack-plugin
接下来，将以下内容添加到 webpack.config.js 文件中：
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [
new TerserPlugin(),
new OptimizeCSSAssetsPlugin()
]
},
// ...
};
上面的配置将使用 TerserPlugin 来压缩 JavaScript，并使用 OptimizeCSSAssetsPlugin 来压缩 CSS。
推理
本文介绍如何使用Webpack进行模块化打包和优化。 我们学习了如何安装 Webpack 并初始化项目。 之后我们配置了Webpack并编译了示例代码。 最后，我们运行打包命令并进行了简单的优化配置。
通过合理配置Webpack，我们可以更好地管理和组织后端项目，实现代码模块化、优化和压缩。 希望这篇文章能帮助你理解和使用Webpack。
请注意，本文仅介绍Webpack的基本用法和一些常见的优化配置。 Webapck 还有许多中级功能和插件可供探索。 如果您对某个特定主题有更多疑问，请告诉我，我会尽力为您解答。
参考
如果你喜欢这个系列的文章，欢迎星星我的项目，源码地址，点击这里
Webpack 4.x 打包衍生产品
在第 14 章的开发与生产环境分拆代码中，其实 webpack 4.x 的打包和拆分，已经做了简要介绍，不过当时虽然我也对这一块感到困惑，只知道它是这样配置的，但是怎么操作还不清楚，这里就稍微详细一点， 当然，这只是个人的理解
在上一章中，我谈到了第三方插件的打包问题
库，谈了打包率和打包后的包文件量，打包后的文件量不宜太大，现在 webpack 打包包文件体积小于 200kb（好像是~忘了）会有提示警告，让我们拆分，通常我们的项目依赖于第三方插件库， 我们不会更改它们的源代码，这些文件不会更改，我们不需要打包它们，或者说，您不必每次都打包它们
单独包装
在第 14 章开发与生产环境拆分代码中，我们介绍了这个第三方插件包的打包到单个文件中，这里我们先拿测试环境打包进行实验，测试环境的配置是未压缩的打包配置。
首先更改 webpack.test.conf .js条目，如下所示：
entry:{
app:[path.resolve(__dirname, 'src/index.js')],
vendor: ["jquery","vue",'vue-router']
},
首先将 jquery、vue、vue-router 三个项目依赖打包成一个文件，先注释掉优化配置中的 runtimeChunk 配置项。
运行纱线测试，这里我配置了 BundleAnalyzerPlugin，终端会输出这句话 Webpack Bundle Analyzer 启动时间：9528 在浏览器中打开这个链接地址，可以看到打包项目的 js 文件中的依赖，可以看出 jQuery 是打包在厂商.js 和 app.js 中打包的，这说明我们的打包是正确的， 并且APP中没有VUE.js因为页面中没有介绍Vue，实际项目肯定会介绍。
我们需要实现的是，我们引入的第三方库全部存储在供应商.js中，其他页面中的js文件不再打包，这样打包正确
其实很简单，我们需要改变优化的配置：
optimization: {
splitChunks: {
cacheGroups: {
a: {
chunks:'initial',
test: /[\/]node_modules[\/]/,
name: 'vendor',
priority: 10,
enforce: true,
},
}
},
// runtimeChunk: {
// name: 'manifest'
// },
},
这里我们刚刚添加了 cacheGroups.vendor 的配置块：“initial”，这里只针对初始化模块，默认为 all，具体配置项见第 14 章。
更改完成后，再次运行 Yarn Test 控制台查看应用.js和厂商的卷大小.js打包前后，打开：9528 查看文件依赖关系，一目了然，应用.js早已没有jquery。
但是还是有问题，从控制台看哈希值的两个打包
文件的后缀可以找到，两个包的哈希值都变了，但是毕竟任何js文件都没有变化，哈希值的变化，说明webpack每次都重新打包了这个js文件，但是我们没有对文件做修改，再打包，那是浪费时间， 如果项目很大，打包速度可能会很慢，这里我们每次只想打包更改后的文件，未更改的文件仍然遵循之前打包的文件。
这也很简单，我们取消 optimization.runtimeChunk 的注释，先运行 yarn test，可以看到还有一个额外的文件叫做 manifest.js，然后我们更改 src/index .js文件，添加一些东西~有更改，然后执行 yarn test
对比两个打包文件的哈希值的变化，我们会发现厂商的哈希值.js没有变化，说明我们的目的已经达到。
所以在这一点上，我们已经初步优化了打包率和打包后的文件大小
结合外露加载器，我个人觉得已经是一种比较完美的方式了，引进和打包、分拆都得到了很大程度的优化。
当然，该项目
可以继续优化分拆，对于这个项目，我们使用了superSlide插件，我们也想分拆出来单独打包，我们需要做的是：
新的入口配置：
entry:{
app:[path.resolve(__dirname, 'src/index.js')],
superSlide: [path.resolve(__dirname, 'src/assets/js/jquery.SuperSlide.2.1.1.js')],
vendor: ["jquery","vue",'vue-router']
},
添加缓存组：
cacheGroups: {
a: {
chunks:'initial',
test: /[\/]node_modules[\/]/,
name: 'vendor',
priority: 10,
enforce: true,
},
b: {
chunks:'initial',
test: /[\/]src[\/]assets[\/]js[\/]/,
name: 'superSlide',
priority: 10,
enforce: true,
},
}
需要注意的是，这里的测试必须匹配插件的目录位置，否则分拆不会成功~
此时，我们再次运行 yarn test，然后运行：9528，可以看到 app .js 中的 superSlide 依赖早已不复存在，只是被打包成一个单独的文件，app 的.js体积再次缩小~
对于 webpack 打包优化的方式，有一种方法可以使用 DllPlugin 和
互联网上的 DllReferencePlugin 提取这些我们不需要经常更新的第三方库，并且每个页面都有一个引用，并且为了不让其他模块中的更改污染 DLL 库的哈希缓存，在 webpack 4 中我们不需要使用两个插件来实现这些效果。我们只需要配置优化配置。
首先，我们经常为项目提取几个块包：
common：将多个页面同时引用的依赖包打到一个包中，一般引入2次以上，即引入包中。您还可以根据项目的页数调整 dll：这是与 DllPlugin 和 DllReferencePlugin 在线使用的包。manifest：webpack 运行时代码，每当依赖包发生变化时，webpack 运行时代码也会发生变化，这个需要单独提取，以减少普通包的哈希值更改 App 对应的页面入口文件的可能性.js
我们想要达到的效果是项目的每次迭代都发布，值得尽可能多地改变以减少块哈希，所以上面的要求可以通过 webpack4 中的优化配置项来实现。
运行时块
在 webpack 4 中，你可以提取清单并只配置 runtimeChunk：
optimization: {
runtimeChunk: {
name: 'manifest'
},
},
拆分块
这种配置允许我们提取具有某些规则的所需包，而 cacheGroups 数组，键值的每次减少，都相当于多一个数据包提取规则。
这个配置的 maxInitialRequests 数组表示一个条目中初始请求块的最大数量（不包括按需加载webpack代码优化，即页面中脚本引入的块），默认为 3，但我们提取的包 common、dll、manifest、app.js，一个页面至少引入 4 个 js 所以这也需要重新配置， 修改我们现有的配置，并按如下方式修改：
entry:{
app:[path.resolve(__dirname, 'src/index.js')],
superSlide: [path.resolve(__dirname, 'src/assets/js/jquery.SuperSlide.2.1.1.js')],
},
optimization: {
splitChunks: {
maxInitialRequests: 6,
cacheGroups: {
dll: {
chunks:'all',
test: /[\/]node_modules[\/](jquery|vue|vue-router)[\/]/,
name: 'dll',
priority: 2,
enforce: true,
reuseExistingChunk: true
},
superSlide: {
chunks:'all',
test: /[\/]src[\/]assets[\/]js[\/]/,
name: 'superSlide',
priority: 1,
enforce: true,
reuseExistingChunk: true
},
commons: {
name: 'commons',
minChunks: 2,//Math.ceil(pages.length / 3), 当你有多个页面时，获取pages.length，至少被1/3页面的引入才打入common包
chunks:'all',
reuseExistingChunk: true
}
}
},
runtimeChunk: {
name: 'manifest'
},
},
修改后，执行 yarn test再次检查：9528，发现 core-js 被打包了很多次，这个项目在参考 superSlide 插件的时候，因为没有 core-js 而报错了，我们下载了插件，此时也是项目依赖包，我们还需要打包成 dll，修改 dll 缓存组配置：
dll: {
chunks:'all',
test: /[\/]node_modules[\/](jquery|core-js|vue|vue-router)[\/]/,
name: 'dll',
priority: 2,
enforce: true,
reuseExistingChunk: true
},
再次执行 yarn 测试，可以看到 core-js 已经被提取到 dll 包中，我们查看包依赖发现虽然我们配置 vue vue-router，但是打包后，项目并没有打包这两个库的任何文件，那是因为其实我们配置了这两个库打包成 dll， 但是在实际项目中，我们没有做任何参考~，所以不会打包到项目中。
所以即使在这里拆装比较好听，其实也会有其他问题。module
chunk moduleIds namedChunks
前端经常讲模块化，就是模块，webpack 打包有块的概念，webpack 有 xxxModuleIdsPlugin 和 xxxChunksPlugin 插件，那么 webpack 中的模块和块是什么关系呢？
每个 chunk 包可以包含多个模块，比如我们打包的 dll.xx.js，chunk 的 id 是 dll，包括 jquery、core-js 两个模块。
一个模块还可以跨块引用另一个模块，即跨 js 引用功能块。
Webpack 在内部维护一个自递增 ID，每个模块一个。因此，当模块被缩减或删除时，id会发生变化，导致其他文件，虽然没有改变，但是因为id被侵占，只能增加或减少，导致整个id的顺序失序。
当我们在里面配置 runtimeChunk 时，我们保证了哈希的稳定性webpack代码优化，但是块包里面的模块 id 由于
webpack 的机制，当我们添加或删除包时，它实际上会发生变化，这可能会影响所有 chunk 的内容哈希值，从而导致缓存失效，为了解决这个问题，我们不在线上使用它的自增 id，而是使用它的哈希作为 ID。在 webpack 4 中，我们只需要像这样配置它：
optimization: {
moduleIds: 'hashed',
}
那么不仅 moduleId，每个隔离的块也有它的 chunkId，同样，在 webpack4 中，我们只需要配置以下参数：
optimization: {
namedChunks: true,
}
此时，即使项目的打包和分拆接近完美~，到达这里后的优化配置如下：
optimization: {
namedChunks: true,
moduleIds: 'hashed',
splitChunks: {
maxInitialRequests: 6,
cacheGroups: {
dll: {
chunks:'all',
test: /[\/]node_modules[\/](jquery|core-js|vue|vue-router)[\/]/,
name: 'dll',
priority: 2,
enforce: true,
reuseExistingChunk: true
},
superSlide: {
chunks:'all',
test: /[\/]src[\/]assets[\/]js[\/]/,
name: 'superSlide',
priority: 1,
enforce: true,
reuseExistingChunk: true
},
commons: {
name: 'commons',
minChunks: 2,//Math.ceil(pages.length / 3), 当你有多个页面时，获取pages.length，至少被1/3页面的引入才打入common包
chunks:'all',
reuseExistingChunk: true
}
}
},
runtimeChunk: {
name: 'manifest'
},
},
这个时候 webpack 配置可以说是很完备了，剩下的就不仅仅是 eslint 的支持了，还有和各种框架的匹配配置~
