webpackでJSをコンパイルするときに一部分の動的importを無視させるには？
Q&A
Closed
解決したいこと
webpackでコンパイルしたやつで静的importは変換してくれるのですが、動的importは変換してほしくないので、それを回避するための設定記述等を教えてほしいです。
発生している問題・エラー
Cannot find module './plugin/text.js'
これはfetchで読込したデータに応じてインポートしたいのですが、webpackがそのインポートを変換してしまうのでエラーが出てしまいます。
該当するソースコード
また、これはコンパイルした状態でエラーが発生するので、コンパイルした状態の一部も書きます。
以下は/src/load/plugin.jsの4行目の周辺に対応してます。
import文だった所
const r = o.plugin.map((o=>n(60)(o).then((async n=>{
全体コード(開発者ツールで成形)
(()=>{
var e = {
60: e=>{
function t(e) {
return Promise.resolve().then((()=>{
var t = new Error("Cannot find module '" + e + "'");
throw t.code = "MODULE_NOT_FOUND",
t
}
))
}
t.keys = ()=>[],
t.resolve = t,
t.id = 60,
e.exports = t
}
}
, t = {};
function n(o) {
var a = t[o];
if (void 0 !== a)
return a.exports;
var r = t[o] = {
exports: {}
};
return e[o](r, r.exports, n),
r.exports
}
n.o = (e,t)=>Object.prototype.hasOwnProperty.call(e, t),
(()=>{
"use strict";
function e(e) {
throw alert("liblog.jsエラー：" + e),
e
}
function t(e) {
console.error("liblog.js警告：" + e)
}
let o, a = {
text: [],
component: []
};
var r = {};
const i = "404\n:p:404 Not Found\n:p:ページファイルが存在しません。";
function c(e) {
let t = e;
return a.text.forEach((e=>t = e(t))),
t
}
const l = (e,t,n,o)=>{
let r = [t]
, i = null
, s = !1;
const p = ()=>r[r.length - 1];
let h, u = !1, m = e.split("\r").join("").split("\n");
n && (t.innerHTML = "",
document.querySelector("title").innerText = m[0]),
m.forEach(((e,t)=>{
if ("+" == e[0] && (u = !1),
u)
p().innerHTML += e + "\n";
else
switch ("/" == e[0] && "/" != e[1] || (s && r.pop(),
s = !1),
":" != e[0] && "=" != e[0] && (i = null),
e[0]) {
case "/":
if ("/" === e[1])
break;
s ? p().innerHTML += "<br>" : (h = document.createElement("p"),
p().appendChild(h),
r.push(h),
s = !0),
h = e.split(""),
h[0] = null,
p().innerHTML += h.join("");
break;
case ":":
if (h = e.split(":"),
h.length < 3)
break;
h = c(h);
let t = document.createElement(h[1]);
t.innerHTML = h[2],
i = t,
p().appendChild(t);
break;
case "=":
if (h = e.split("="),
h.length < 3)
break;
h = c(h),
i ? i.setAttribute(h[1], h[2]) : p().setAttribute(h[1], h[2]);
break;
case "\\":
if (h = e.split("\\"),
h.length < 2)
break;
h = c(h);
let n = o.name.indexOf(h[1]);
if (n < 0)
break;
let m = o.base[n];
h.forEach(((e,t)=>{
t < 2 || (m = m.replace("%" + (t - 1), e))
}
)),
l(m, p());
break;
case "&":
h = e.split(""),
h[0] = null,
p().innerHTML += h.join("");
break;
case "-":
if (h = e.split("-"),
h.length < 2)
break;
let d = document.createElement(h[1]);
p().appendChild(d),
r.push(d),
h.length > 2 && "DIRECT" === h[2] && (u = !0);
break;
case "+":
u = !1,
r.pop();
break;
case "@":
if (h = e.split("@"),
h.length < 2)
break;
let f = a.component.find((e=>e[1] == h[1]));
if (!f)
break;
h.shift(),
h.shift(),
p().appendChild(f(h))
}
}
))
}
, s = l
, p = e=>{
history.replaceState("", "", "?p=" + e),
fetch(r.first + e + r.last).then((e=>e.ok ? e.text() : i)).then((e=>s(e, o, 1)))
}
;
(async()=>{
(()=>{
let e = document.querySelector("html").getRootNode();
e.prepend(document.createComment("https://github.com/TNTSuperMan/liblog.js")),
e.prepend(document.createComment("Powered by liblog.js by TNTSuperMan.")),
console.log("%c Powered by Whxute.js by TNTSuperMan.", "font-size:20px"),
console.log("https://github.com/TNTSuperMan/liblog.js")
}
)();
const c = await (async()=>{
const n = await fetch("config.json", {
cache: "no-store"
});
n.ok || e('"config.json"にアクセスできません。\n');
let o = await n.json().catch((t=>e('"config.json"の記述が不正です。')))
, a = [];
const i = e=>a.push(e);
if (o.pagestruct || i("pagestruct"),
o.temp || i("temp"),
o.icon || t('config.jsonで設定"icon"が欠如しています。'),
o.plugin || t('config.jsonで設定"plugin"が欠如しています。'),
o.pagepath ? (o.pagepath.first || i("pagepath.first"),
o.pagepath.last || i("pagepath.last")) : i("pagepath"),
0 != a.length) {
let t = '"' + wtsetting + '"で以下の設定が欠如しています。\n';
a.forEach((e=>{
t += e + "\n"
}
)),
e(t)
}
return r = o.pagepath,
o
}
)()
, l = (e=>{
let t = []
, n = []
, a = [];
return e.pagestruct.forEach((e=>{
let c = e.default;
if ("main" === e.id) {
let e = Object.fromEntries(new URLSearchParams(window.location.search));
null != e.p && (c = r.first + e.p + r.last)
}
let l = document.createElement(e.ename);
e.attr && e.attr.forEach((e=>l.setAttribute(e.name, e.value))),
document.body.appendChild(l),
n.push(l),
"main" === e.id && (o = l),
t.push(fetch(c).then((e=>e.ok ? e.text() : i)).catch((e=>i))),
a.push(e.id)
}
)),
{
text: t,
elms: n,
ids: a
}
}
)(c)
, h = (async o=>{
const r = o.plugin.map((o=>n(60)(o).then((async n=>{
"function" != typeof n.func ? e('プラグインファイル"' + o + '"でfunc関数が不足しています。') : "string" != typeof n.mode ? e('プラグインファイル"' + o + '"でmode変数が不足しています。') : "string" != typeof n.name && e('プラグインファイル"' + o + '"でname変数が不足しています。');
let r = !0;
switch (n.mode) {
case "text":
a.text.push(n.func);
break;
case "component":
a.component.push([n.func, n.name]);
break;
default:
r = !1,
t('プラグインファイル"' + o + '"のmode変数が不正です。')
}
if (r)
if ("function" != typeof n.init)
t('プラグインファイル"' + o + '"でinit関数が不足しています。');
else {
const e = n.init();
e instanceof Promise && await e
}
}
))));
await Promise.all(r)
}
)(c)
, u = (e=>{
let t = {
base: [],
name: []
};
try {
e.temp.forEach((e=>{
t.base.push(e.base),
t.name.push(e.name)
}
))
} catch {
err("テンプレートの記述が不正です")
}
return t
}
)(c);
await h,
document.head.appendChild(document.createElement("title")),
Promise.all(l.text).then((e=>l.elms.forEach(((t,n)=>s(e[n], t, "main" === l.ids[n] ? 1 : 0, u))))).then((()=>{
let e = Object.fromEntries(new URLSearchParams(window.location.search));
null != e.s && (document.documentElement.scrollTop += document.getElementById(e.s).getBoundingClientRect().y)
}
));
let m = document.createElement("link")
, d = document.createElement("link");
m.rel = "shortcut icon",
d.rel = "icon",
m.href = c.icon,
d.href = c.icon,
document.head.appendChild(m),
document.head.appendChild(d),
window.l = p
}
)()
}
)()
}
)();
自分で試したこと
evalにする
evalにしたら別のimport部分でエラーが発生しました。
0
