Webpack relies on management

Webpack provides a variety of module loading methods, ES2015 static loading method is officially recommended, but sometimes need to load a large number of modules, you can use the Webpack module method require.context.

demand

Suppose you have a project like this:

src/
	packages/
		one.js
		tow.js
	app.js
Copy the code

Where app.js is the main file, the main file needs to load all files under the Packages folder.

For testing convenience, one.js and to.js export a function by default and print a sentence:

/ * * *@file one.js
 * path: src/packages/one.js
 */

export default function one() {
  console.log("this is one");
}
Copy the code

/ * * *@file tow.js
 * path: src/packages/tow.js
 */

export default function tow() {
  console.log("this is tow");
}
Copy the code

Module context

To import the entire packages in SRC /app.js, create a module context with references to all modules in the target directory.

Create a module context using the require.context method:

require.context(directory, (useSubdirectories = false), (regExp = / ^ \ \ / /));
Copy the code

It takes three arguments:

• directory: Folder directory to search for;
• useSubdirectories: Whether to search subdirectories;
• regExp: Indicates the regular expression for filtering files.

Try creating a module context in SRC /app.js:

/ * * *@file app.js
 * path: src/app.js
 */

const context = require.context("./packages".true./\.js$/);
Copy the code

The module context provides the following API usage:

• context.resolve(key): function that passes in the requested module path to get the module ID, which is similar to the path;
• context.keys(): function that returns an array of requests processed by the module context;
• context.id: Indicates the module ID of the current module context.
• context(key): function that passes in a module request and returns the specified module.

Use both to see:

Modify the SRC/app. Js:

/ * * *@file app.js
 * path: src/app.js
 */

const context = require.context("./packages".true./\.js$/);

/ / use the id
console.log(`id:`, context.id, `\n`);

/ / use the keys
console.log(`keys:`, context.keys(), `\n`);

/ / use the resolve

console.log(`resolve:`);
context.keys().forEach((key) = > console.log(context.resolve(key)));

console.log(`\nmodules:`);

context.keys().forEach((key) = >
  /* The module accessed needs to use.default to access the default export */
  context(key).default()
);
Copy the code

Packaging performs

Install Webpack and Webpack-CLI package test:

npm install --save webpack webpack-cli
Copy the code

Then add webpack.config.js to the root directory:

/ * * *@file webpack.config.js
 */

const path = require("path");

module.exports = {
  mode: "development".entry: "./src/app.js".output: {
    filename: "bundle.js".path: path.resolve(__dirname, "dist"),}};Copy the code

Then execute the command (Windows) :

npx webpack web; node ./dist/bundle.js
Copy the code

You can see the console output is:

id: ./src/packages sync recursive \.js$

keys: [ './one.js', './tow.js' ]

resolve:
./src/packages/one.js
./src/packages/tow.js

modules:
this is one
this is tow
Copy the code

Observations show that:

• Id is the related information composition of the module context;
• Keys contain the imported module path;
• Resolve resolves the module’s project-based path;
• The module context is used to access the module directly, and the default export is of the moduledefaultProperties.

Used in Vue

Use Vue code

Assume the project directory is as follows:

src/
	packages/
		One.vue
		Tow.vue
	VueApp.vue
Copy the code

SRC /packages/ one.vue

<script>
  / * * *@file One.vue
   * path: src/packages/One.js
   */
  export default {
    name: "One"};</script>
<template>
  <p>this is One</p>
</template>
Copy the code

SRC /packages/ tow.vue changes are similar, so please note that component names are not the same.

Import the wholesrc/packagesVue files in the folder

In the SRC/vueapp. vue file, write the following code:

<script>
  / * * *@file VueApp.vue
   * path: src/VueApp.vue
   */

  /** Module context, get all Vue files in SRC /packages/ folder */
  const context = require.context("./packages".true./\.vue$/);

  /** Component package, using component names as keys and components as values to fill */
  const packages = context.keys().reduce((prev, key) = > {
    const Component = context(key).default;
    prev[Component.name] = Component;

    return prev;
  }, {});

  export default {
    components: { ...packages },
    data() {
      return {
        ComponentNames: Object.keys(packages), }; }};</script>
<template>
  <div>
    <h2>Vue Components!</h2>

    <! Render all components in Packages using Component components -->
    <Component v-for="name in ComponentNames" :key="name" :is="name" />

    <p>{{ComponentNames}}</p>
  </div>
</template>
Copy the code

By introducing this component into your scaffold, you can see all Vue components dynamically rendered under the SRC/Packages/folder.

The source code is attached at the end of this article.

Used in React

Assume the project folder is as follows:

src/
	packages/
		One.jsx
		Tow.jsx
	ReactApp.jsx
Copy the code

Use React code

Modify the contents of the SRC /packages/ one.jsx file as follows:

/ * * *@file src/packages/One.jsx
 */
import React from "react";

export default function One() {
  return <p>this is One</p>;
}
Copy the code

The SRC/Packages/tow.jsx files are similar and will not be described again.

Import the wholesrc/packagesJSX files in the folder

Write the following code in SRC/reactapp.jsx:

/ * * *@file ReactApp.jsx
 * path: src/ReactApp.jsx
 */

import React from "react";

/** Module context, get all JSX files in SRC/Packages/folder */
const context = require.context("./packages".true./\.jsx$/);

/** Component package */
const packages = context.keys().map((key) = > context(key).default);

export default function ReactApp() {
  return (
    <section>
      <h2>React Components!</h2>

      {packages.map((Component) => (
        <Component key={Component.name} />
      ))}

      <p>{packes.map ((v) => v.name.join (",")}</p>
    </section>
  );
}
Copy the code

This allows the SRC /ReactApp. JSX component to render all contents in the SRC/Packages/folder.

other

The original

Source making

Source code installation:

git clone https://github.com/xxwwp/blog-webpack-Dependency-Management.git
cd blog-webpack-Dependency-Management
yarn
# or
# npm install
Copy the code

Construction:

yarn build
# or
# npm run build
Copy the code

To view:

Once the build is complete, open dist/index.html.

Reference:

Dependency Management