1. // ./src/index.js
    3. export const add = (x, y) => {
    4.     return x + y
    5. }
    1. // webpack.config.js
    3. const path = require('path')
    5. module.exports = {
    6.     mode: 'production',
    7.     entry: './src/index.js',
    8.     output: {
    9.         filename: 'build.js',
    10.         path: path.resolve(__dirname, './dist'),
    11.         library: 'libs'
    12.           //library: [
    13.         //  name: 'libs',
    14.         //  type: 'window'
    15.         //]
    16.     }
    17. }

    webpack 打包好之后，我们就可以在其它html文件的script标签引入打包好的那个文件了

    1. // ./demo/index.html
    3. <!DOCTYPE html>
    4. <html lang="en">
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.     <title>Document</title>
    10. </head>
    11. <body>
    12.     <script src="../dist/build.js"></script>
    13.     <script>
    14.         console.log(libs.add(1, 1)); // 2
    15.     </script>
    16. </body>
    17. </html>

    上述方法只能使打出来的包用在html的script标签，那么我们如何让它兼容不同的环境呢？

    commonjs 环境

    // webpack.config.js

const path = require('path')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, './dist'),
          library: [
          name: 'libs',
          type: 'commonjs'
        ]
    }
}

    // ./demo/index.js

const { libs } = require('../dist/build.js')
console.log( libs.add(2, 3))

    esModule 环境

    // webpack.config.js

const path = require('path')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
      // 此配置为实验性配置
      experiments: {
        outputModule: true
    },
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, './dist'),
          library: [
          type: 'module'
        ]
    }
}

    // ./demo/index.html

<!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 type="module">
        import { add } from '../dist/build.js'
        console.log(add(2, 2)) // 4
    </script>
</body>
</html>

    上述方法中，我们是分别设置了对应环境的打包配置，那么能不能设置一个值支持所有环境呢？

    type: ‘umd’ 支持script 标签、AMD、commonjs

    // webpack.config.js

const path = require('path')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, './dist'),
          library: [
          name: 'libs',
          type: 'umd'
        ],
      globalObject: 'globalThis'
    }
}

    // ./demo/index.js

const { add } = require('../dist/build.js')
console.log( add(2, 3)) // 5