@soil/dom
次のようにして、webpack経由で呼び出されるnpmパッケージを使用しようとしています:
import {h} from '@soil/dom'
しかし、実行するwebpack
と、次の警告とエラーが表示されます。
WARNING in ./node_modules/@soil/dom/build/index.js 3:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./src/index.ts
ERROR in ./node_modules/@soil/dom/build/index.js
Module not found: Error: Can't resolve './html/h' in '/home/daniel/Code/time-flies/node_modules/@soil/dom/build'
@ ./node_modules/@soil/dom/build/index.js 7:8-70
@ ./src/index.ts
私のpackage.json
ファイルは次のようになります。
{
"dependencies": {
"@soil/dom": "0.6.0"
},
"devDependencies": {
"typescript": "2.9.1",
"ts-loader": "4.4.1",
"webpack": "4.12.0",
"webpack-cli": "3.0.3"
}
}
私のwebpack.config.js
ファイルは次のようになります。
const path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.ts']
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
}
}
ちなみに、npm パッケージのディレクトリ構造は次の@soil/dom
ようになります。
@soil/
└── dom
├── build
│ ├── html
│ │ ├── h.js
│ │ └── ...
│ ├── index.js
│ └── ...
├── package.json
└── ...
含まれるpackage.json
もの:
{
"main": "build/index.js"
}
index.js
ファイルには以下が含まれます (UMD モジュール システムを対象としてコンパイルされています) 。
var h_1 = require("./html/h");
exports.h = h_1.h;
'./html/h'
この時点でwebpack が相対パスを解決できないのはなぜですか? この写真には何が欠けていますか?