webpack5打包生成支持script引入方式

安装模块：

"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"

创建webpack.config.js

以下适用script标签引入js

//通过node.js动态获取绝对路径
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    //入口
    entry: { //扩展性最高的写法,推荐这种写法
        WondersApp: {
            import:'./WondersApp', //启动时需加载的模块。
            library: {
                // `output.library` 下的所有配置项可以在这里使用
                name: 'WondersApp', //对外暴露WondersApp对象
                type: 'umd',
                export: ['default'],
            }
        },
        ver:{
            dependOn:'WondersApp', //当前入口所依赖的入口。它们必须在该入口被加载前被加载。
            import:'./ver',
        },
    },
    //出口
    output:{
        clean: true,
        path:path.resolve(__dirname,'dist'),
        globalObject: 'this',
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        port: 9000,
    },
    //development 开发版本    production 运行版本
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            title: '管理输出1',
        }),
    ],

}

这里重点注意：

var WondersApp = require('./wondersh5/index')
export default WondersApp; //必须使用export default导出才能用script引入方式使用

案例包

webpack案例2