时间戳

首页 > 解决方案 > 使用 webpack 从库中公开变量

javascript - 使用 webpack 从库中公开变量

问题描述

我似乎不明白 webpack 是如何工作的。我想创建一个普通的 javascript 库，其中包含一些可重用的组件，我可以在其他应用程序和 html 中的脚本标签中使用这些组件。所以我尝试制作一个非常简单的库，它公开一个包含字符串的变量。我认为应该很简单，但似乎无法正常工作。

我的 webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        library: {
            name: 'mypack',
            type: 'umd',
        },
    },
    devtool: 'source-map',
    devServer: {
        watchContentBase: true,
        contentBase: path.resolve(__dirname, 'dist'),
        port: 9000
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            }
        ]
    },
}

我的 package.json：

{
  "name": "mypack",
  "version": "0.0.1",
  "main": "./src/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack ./src/app.js -d eval --watch --mode development",
    "dev": "npx webpack serve"
  },
  "author": "me",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.0.0",
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "style-loader": "^3.2.1"
  }
}

我的 src/app.js

let myvar = "test";

export {myvar};

我的 dist/index.html：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"><title>test</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="main.js"></script>
    </head>
    <body>
        Test
        <script>
          console.log(mypack.myvar);
        </script>
    </body>
</html>

mypack.myvar 在控制台中给出“未定义”。mypack 似乎是一个空对象 {}。如何访问我的包中的 myvar？我究竟做错了什么？

当然，这只是一个假人，实际上我想从包中暴露对象。

标签： javascriptwebpack

解决方案

最后，这似乎是 webppack-dev-server 的问题。

如果我从 webpack.config.js 中注释掉 'contentBase: path.resolve(_dirname, 'dist'),' 行，请将 index.html 复制到我的包的根目录并将脚本标记源更改为“dist/ index_bundle.js" 然后它就可以工作了。

不确定那里发生了什么，脚本似乎在上述情况下加载得很好（在浏览器的源视图中，我可以单击链接并看到生成的 javascript），但似乎根本没有工作。但这是另一个问题。

推荐阅读