webpack生成一个js文件，想让他可以在浏览器环境和webpack里面都可以引用

Question

webpack生成一个js文件，想让他可以在浏览器环境和webpack里面都可以引用

webpack配置

module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: "aaaaa.js",
        libraryTarget: "umd",
        library: 'kkkkk',
        globalObject: "this"
    },
    // plugins: [new BundleAnalyzerPlugin()]
}

导入过程：

Answer 1

在这个webpack配置中，可以通过设置libraryTarget为umd，library为希望在全局环境中使用的变量名，以及设置globalObject为this，来实现在浏览器环境和webpack里面都可以引用生成的js文件。

在浏览器环境中，生成的js文件会作为全局变量注入到浏览器的全局作用域中，可以通过变量名来引用。例如在上面的配置中，如果将library设为kkkkk，则在浏览器中可以通过kkkkk变量来引用生成的js文件。

在webpack中，生成的js文件可以作为模块使用。可以在其他文件中使用import或require语句来引用生成的模块。例如：

// 使用import引用模块
import kkkkk from './build/aaaaa.js';

// 使用require引用模块
const kkkkk = require('./build/aaaa
a.js');

如果希望生成的js文件在浏览器和webpack中都可以直接使用，还可以考虑使用expose-loader来将生成的模块注入到浏览器的全局作用域中。可以在webpack的配置中添加如下内容：

module: {
rules: [
{
test: require.resolve('./build/aaaaa.js'),
use: [{
loader: 'expose-loader',
options: 'kkkkk'
}]
}
]
}

这样生成的js文件就可以在浏览器环境和webpack里面都直接使用了。在浏览器环境中，可以通过kkkkk变量来引用生成的js文件，在webpack中，可以通过import或require语句来引用生成的模块。