javascript - Webpack 导出的变量在浏览器中不可见

Question

这是我的包文件，我在这里包含了组件。

import Container from './Components/Container/Container.component.js';
import Heading from './Components/Heading/Heading.component.js';

const Components  = {

  Container: Container,
  Heading: Heading
}

module.exports = Components;

目标是使这个 Components 变量在浏览器标签中可见。到目前为止 console.log(Components) 是 undefined。

module.exports = {
entry: {
    bundle: "./src/bundle.js"
},
output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "bundle.js",
    library: "Components",
    libraryTarget: "var",
},

module:{
    rules: [
        {
            test: /\.js$/,
            exclude: path.resolve(__dirname, "node_modules"),
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env", "react"]
                }
            }
        }
    ]
},

target: "web"
}

这是我的 webpack 配置文件。我在我的 webpack 配置中做什么才能使组件在浏览器中可见而不将其分配给窗口对象。换句话说，让它成为全局的并且能够通过 webpack 将它导入到其他 js 文件中。

Answer 1

解决方案(据我了解，这里实际上是重复的，由@dreyescat 回答)

1) 输出目标必须是库。所以 webapck 输出应该是这样的

output: {
    path: path.resolve(__dirname, "dist/js"),
    filename: "Bundle_name",
    library: "Library_name",
    libraryTarget: "var" //See below
},

libraryTarget: "var"-(默认)加载库时，入口点的返回值将分配给变量 - https://webpack.js.org/configuration/output/#output-librarytarget

对于那些希望做同样事情的人，请确保将您的变量导出为

module.exports = your_variable;

所以出于某种原因我把它全部放在我的文件中但它不起作用，我使用了 webpack --watch。我在没有 watch 的情况下运行了 webpack 来编译它一次并且它工作了。不知道为什么。

它只是不适用于 webpack-cli --watch，而 webpack --watch 完全没问题