|
所以把 react、lodash、redux、moment 等拆分成不同的文件:
- const path = require('path');
- const webpack = require('webpack');
- module.exports = {
- entry: path.resolve(__dirname, 'src/index.js'),
- plugins: [
- new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly
- ],
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: '[name].[contenthash].js',
- },
- optimization: {
- runtimeChunk: 'single',
- splitChunks: {
- chunks: 'all',
- maxInitialRequests: Infinity,
- minSize: 0,
- cacheGroups: {
- vendor: {
- test: /[/]node_modules[/]/,
- name(module) {
- // get the name. E.g. node_modules/packageName/not/this/part.js
- // or node_modules/packageName
- const packageName = module.context.match(/[/]node_modules[/](.*?)([/]|$)/)[1];
- // npm package names are URL-safe, but some servers don't like @ symbols
- return `npm.${packageName.replace('@', '')}`;
- },
- },
- },
- },
- },
- };
文档将很好地解释这里的大部分内容，但是我将稍微解释一下需要注意的部分，因为它们花了我太多的时间。
- Webpack 有一些不太聪明的默认设置，比如分割输出文件时最多3个文件，最小文件大小为30 KB（所有较小的文件将连接在一起），所以我重写了这些。
- cacheGroups 是我们定义 Webpack 应该如何将数据块分组到输出文件中的规则的地方。这里有一个名为 “vendor” 的模块，它将用于从 node_modules 加载的任何模块。通常，你只需将输出文件的名称定义为字符串。但是我将 name 定义为一个函数(将为每个解析的文件调用这个函数)。然后从模块的路径返回包的名称。因此，我们将为每个包获得一个文件，例如 npm.react-dom.899sadfhj4.js。
- NPM 包名称必须是 URL 安全的才能发布，因此我们不需要 encodeURI 的 packageName。 但是，我遇到一个.NET服务器不能提供名称中带有 @(来自一个限定范围的包)的文件，所以我在这个代码片段中替换了 @。
- 整个设置很棒，因为它是一成不变的。 无需维护 - 不需要按名称引用任何包。
（编辑：晋中站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
