Initial experience of Webpack packaging library

summary

The following is based on output.library.type: 'umd' in the webpack configuration

After using webpack to package a file as a library, when the packaged file is referenced by the script tag, the name of the library will be placed in the global variable for use. As for the content under the library name, it is related to the value of the output.library.export attribute in the webpack configuration.

export default

When output.library.export/output.library.type is not configured as an empty string, the default value of export is undefined. At this time, the library is packaged. When using the library, the contents under the library name are all exported contents under the main file

export: 'default'

When the value of output.library.export is default, it is packaged. When using the library after packaging, the content under the library name is the content exported by using the keyword export default under the main file

export: ['xx1', 'xx2']

When the value of output.library.export is ['xx1 ','xx2'], it is packaged. When using the library after packaging, the content under the library name is the attribute value of XX2 in the content exported by using the keyword export let/const xx1 under the main file

Case demonstration

preparation

Initialize project

npm init -y

Install webpack

npm i webpack webpack-cli -D

Configure webpack

const { resolve } = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    library: {
      name: 'Testfile', // Library name
      type: 'umd', // The libraries allowed to be exported can be used under the CommonJS/AMD specification or as global variables
      export: 'default' // The default is undefined and cannot be an empty string [an error will be reported when packing]
    }
  }
}

New test js file

Create a new test.js file

Create the test.js file in the src directory of the root directory

class Test {
  constructor () {}

  setAge (age) {
    this.age = age;
  }

  getAge () {
    return this.age;
  }
}

export default Test

Create a new index.js file

Create the index.js file in the src directory of the root directory

import Test from "./Test";

export let a = 3
export let obj = {chineseName: 'China'}
export default Test

Create a new test index.html file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./dist/bundle.js"></script>
  <script>
    debugger
  </script>
</body>
</html>

Configure webpack to package.json

Add under scripts in package.json

"dev": "webpack"

Packaging test

Open the console and enter npm run dev to package the library

Run the index.html file

Open the index.html file in the browser, open the developer tool, and refresh the page.

export type

The export property is not configured in the webpack

You can see in the developer tool that the content of the global variable Testfile is

At this point, Testfile is an object that contains all the contents exported in index.js

The value of the export property is default

You can see in the developer tool that the content of the global variable Testfile is

At this time, Testfile is the content exported using export default in index.js

The value of export attribute is a

You can see in the developer tool that the content of the global variable Testfile is

At this time, Testfile is the result value of the content exported using export let a = 3 in index.js

The value of export attribute is ['obj ',' Chinesename ']

You can see in the developer tool that the content of the global variable Testfile is

At this time, Testfile is the content result value exported by let obj = {chineseName: 'China'} in index.js

Tags: Webpack

Posted on Thu, 28 Oct 2021 12:04:51 -0400 by usvpn

Programmer Help