webpackで作成したmain.jsを他のjavascriptから利用したい

webpackの学習をしています。
webpackで作成したmain.js(index.jsとmyutilの結合）の中のメソッドなどを、
test.jsから利用したいのですが実現できずにいます。
上記のようなことが可能かどうかご教示いただきたいです。
また上記が可能な場合、誤っている点をご指摘いただけますでしょうか。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Cannot use import statement outside a module

該当のソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>Document</title>
</head>
<body>
	<p>hello webpack!</p>

	<script src="./main.js"></script>
	<script src="./test.js"></script>
</body>
</html>

test.js

import { APP_NAME, hello, Figure } from './main';
console.log(Figure.getTriangle(1, 5));

index.js(webpackによりmain.jsになります）

import { APP_NAME, hello, Figure } from './myutil';
console.log(Figure.getTriangle(100, 5));

myutil.js(webpackによりmain.jsになります）

let
1export const APP_NAME="webpack!??";
2export class Figure {
3	static getTriangle(base,height){
4		return base * height;
5	}
6}

行動規範の内容に同意します

回答1件

ベストアンサー

index.js(webpackによりmain.jsになります）

Webpackで普通にコンパイルすると、importなどはWebpackの世界で終わる形となってしまい、外部からアクセスできません。

方法は2つ考えられます。

Webpackを挟まずに、<script type="module">として、モジュールをブラウザ自体に処理させる
Webpack処理されるコードからwindow.APP_NAME = APP_NAME;のようにwindow経由でエクスポートしておいて、使う側でもwindow.APP_NAMEを参照する

投稿2019/10/29 12:08