|
以是把 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处事器不能提供名称中带有 @(来自一个限制范畴的包)的文件，以是我在这个代码片断中替代了 @。
- 整个配置很棒，由于它是一成稳固的。 无需维护 - 不必要按名称引用任何包。
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
