webpack

https://www.yuque.com/cuggz/interview/hx0sf2
当你的项目具有多个入口文件时，使用 CommonsChunkPlugin 可以帮助提取公共代码，以减少重复打包，从而加快 webpack 的构建速度。这个插件能够将多个入口 chunk 中共享的模块提取到一个单独的 chunk 中，这个单独的 chunk 通常称为 “vendor” 或 “common”。

下面是一个简单的示例，演示如何在 webpack 配置中使用 CommonsChunkPlugin：

假设你的项目有两个入口文件 app1.js 和 app2.js，它们都引入了相同的第三方库 lodash。

javascript
Copy code
// app1.js
import _ from ‘lodash’;

console.log(‘This is app1’);

// app2.js
import _ from ‘lodash’;

console.log(‘This is app2’);
在 webpack 配置文件中，你可以通过以下方式使用 CommonsChunkPlugin：

javascript
Copy code
const path = require(‘path’);
const webpack = require(‘webpack’);

module.exports = {
entry: {
app1: ‘./src/app1.js’,
app2: ‘./src/app2.js’
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ‘common’ // 指定公共代码块的名称
})
]
};
在这个配置中，我们首先定义了两个入口文件 app1.js 和 app2.js。然后，我们使用 CommonsChunkPlugin 插件来提取这两个入口文件中共享的模块，并将它们放入一个名为 common.bundle.js 的单独文件中。

在构建过程中，webpack 将首先构建两个入口文件的 chunk，然后根据 CommonsChunkPlugin 的配置，提取公共模块并生成 common.bundle.js 文件。这样一来，每个入口文件中的公共模块就不会被重复打包，从而提高了构建速度。

通过使用 CommonsChunkPlugin，你可以轻松地优化多入口项目的构建速度，尤其是当项目中有大量公共模块需要提取时。

npm执行了什么实现了什么

通过 externals 配置可以将常用库从 webpack 构建中排除，从而加快构建速度。这对于像 React、Vue、lodash 等常用库，由 CDN 引入或者在全局环境中可用的情况下特别有用。这样一来，webpack 在构建过程中就不会将这些库打包到输出文件中，而是从外部引入。

下面是一个示例，演示如何通过 externals 配置来提取常用库：

假设你的项目中使用了 lodash 库，而你希望在构建过程中将它从外部引入而不是打包到输出文件中。

javascript
Copy code
// index.js
import _ from ‘lodash’;

console.log(_.join([‘Hello’, ‘webpack’], ’ '));
在 webpack 配置文件中，你可以通过以下方式配置 externals：

javascript
Copy code
const path = require(‘path’);

module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
externals: {
lodash: ‘_’
}
};
在这个配置中，我们通过 externals 配置将 lodash 库排除在外，并告诉 webpack 在构建过程中不要将 lodash 打包到输出文件中。而是假设 lodash 库在全局环境中可用，并可以通过 _ 这个全局变量来引用。

当你构建项目时，webpack 将会生成一个输出文件（如 bundle.js），但它不会包含 lodash 库的代码。相反，你需要在 HTML 文件中通过

html
Copy code

通过这种方式，你可以使用 externals 配置来提取常用库，避免将它们打包到输出文件中，从而加快构建速度，并且可以在开发和生产环境中更好地利用浏览器缓存。