Webpack 如何配置模块的加载顺序-JavaScript中文网-JavaScript教程资源分享门户

随着前端项目越来越复杂，模块化已经成为了开发的标配。而模块化的原理就是将代码分解成多个模块，使代码更易于维护和管理。在 JavaScript 开发中，Webpack 已成为了最流行的模块打包工具之一。Webpack 可以将模块打包成一个或多个文件，并且可以配置模块的加载顺序。本文将介绍如何在 Webpack 中配置模块的加载顺序。

配置模块加载顺序

在 Webpack 中，我们可以通过以下四种方式配置模块的加载顺序：

webpack.ProvidePlugin
import
模块分离
使用 CommonsChunkPlugin

webpack.ProvidePlugin

webpack.ProvidePlugin 是 Webpack 提供的一个插件，在 webpack.config.js 中使用。可以全局注入一些变量或者模块，使得不需要 import 就可以直接使用。这个插件通常用于引入类库或者 polyfill。

例如，我们想在整个项目中使用 lodash，那么我们可以使用 webpack.ProvidePlugin 来注入 lodash，如下所示：

// javascriptcn.com 代码示例
// webpack.config.js
const webpack = require('webpack');
module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      _: 'lodash'
    })
  ]
};

这样，我们就可以在项目中直接使用 _ 变量访问 lodash，不需要再 import 了。

import

使用 import 可以精确的控制模块的加载顺序。在 Webpack 中，可以通过 import 提前引入需要的模块。

例如，我们有两个文件，a.js 和 b.js，它们的代码如下所示：

// javascriptcn.com 代码示例
// a.js
import { foo } from './b';
console.log('a.js');
foo();

// b.js
console.log('b.js');
export function foo() {
  console.log('foo');
}

那么执行 a.js，我们会发现打印出来的顺序是 b.js，a.js，foo。这是因为 import 提前引入了模块，b.js 在 a.js 中先被引入了，所以 b.js 首先被执行了。

模块分离

Webpack 通过模块分离可以实现将公共模块和业务代码分离成不同的文件，以此来优化打包后的体积。我们可以将公共模块提取出来，引入到不同的 chunk 中。通过将公共模块提取出来，可以减少代码重复，加快浏览器加载速度。

模块分离需要使用到 Webpack 自带的 optimization.splitChunks 配置，如下所示：

// javascriptcn.com 代码示例
// webpack.config.js
module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

这样 Webpack 会自动将公共模块进行提取，最终生成多个文件。

使用 CommonsChunkPlugin

除了 optimization.splitChunks，Webpack 还提供了另外一个插件，用于提取公共模块，那就是 CommonsChunkPlugin。这个插件可以将公共的代码提取出来，生成一个或多个文件。

例如，我们有两个入口文件 main.js 和 vendor.js，代码如下所示：

// javascriptcn.com 代码示例
// main.js
import { foo } from './foo';
import { bar } from './bar';

foo();
bar();

// vendor.js
import $ from 'jquery';
console.log($);

我们可以使用 CommonsChunkPlugin 将公共的依赖抽离出来，生成一个名为 vendor.js 的文件。如下所示：

// javascriptcn.com 代码示例
// webpack.config.js
const webpack = require('webpack');
module.exports = {
  entry: {
    main: './main.js',
    vendor: './vendor.js'
  },
  // ...其他配置
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ]
};

这样生成的 vendor.js 文件中就包含了 jquery 依赖，并且可以在其他文件中被引用。

总结

在本文中，我们介绍了如何在 Webpack 中配置模块的加载顺序。通过了解配置模块加载顺序的方法，可以优化 Webpack 的打包过程，提高项目的性能。希望本文的内容对读者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652f972f7d4982a6eb0c1df7