Webpack UMD:关键依赖......无法静态提取
Webpack UMD: Critical dependency... cannot be statically extracted
我正在尝试使用 webpack 构建一个 umd 库;不管我做什么都会收到警告:
WARNING in D:/Code/Node/sample.io/source/index.ts
3:24 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
当我尝试 require('./index.js')
生成的 index.js 我得到:
Error: Cannot find module "."
为了完整起见,这里是我所有的文件:
webpack.config.js:
module.exports = {
entry: {
index: __dirname + '/index'
},
output: {
filename: 'index.js',
library: 'mylib',
libraryTarget: 'umd',
umdNamedDefine: true
},
resolve: {
root: __dirname,
extensions: ['', '.ts', '.js'],
},
module: {
loaders: [
{ test: /\.ts$/, loaders: ['awesome-typescript-loader'] }
]
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "umd"
},
"exclude": [
"node_modules"
]
}
package.json:
{
"name": "foo",
"version": "0.1.0",
"devDependencies": {
"awesome-typescript-loader": "^2.0.2",
"typescript": "^2.0.0",
"webpack": "^2.1.0-beta.17"
}
}
index.ts:
export function MyFunc(params) {
console.log("hello world");
}
node -v
= v6.3.0
npm -v
= 3.7.5
奇怪的是,我的一个朋友说这对他们来说没有错误。虽然他在node 4.2.6
。如果我将模块更改为 commonjs,它可以正常工作,没有警告或错误。
我认为你需要 "module": "commonjs"
在 tsconfig 中,这样 typescript 编译将发出 webpack 可以理解的模块,你仍然会从 webpack 获得 umd 输出
希望对您有所帮助
如果您无法将 module
从 umd
更改为 commonjs
,因为您只是在使用它,并且您无权访问源,您可以使用 umd-compat-loader
作为解决方法。将以下 rule
添加到您的 webpack.config.js
:
module: {
rules: [
// other rules come here.
{
test: /node_modules[\|/](name-of-the-umd-package)/,
use: { loader: 'umd-compat-loader' }
}
]
},
我已经为此添加了一些细节 thread。
我正在尝试使用 webpack 构建一个 umd 库;不管我做什么都会收到警告:
WARNING in D:/Code/Node/sample.io/source/index.ts 3:24 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
当我尝试 require('./index.js')
生成的 index.js 我得到:
Error: Cannot find module "."
为了完整起见,这里是我所有的文件:
webpack.config.js:
module.exports = {
entry: {
index: __dirname + '/index'
},
output: {
filename: 'index.js',
library: 'mylib',
libraryTarget: 'umd',
umdNamedDefine: true
},
resolve: {
root: __dirname,
extensions: ['', '.ts', '.js'],
},
module: {
loaders: [
{ test: /\.ts$/, loaders: ['awesome-typescript-loader'] }
]
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "umd"
},
"exclude": [
"node_modules"
]
}
package.json:
{
"name": "foo",
"version": "0.1.0",
"devDependencies": {
"awesome-typescript-loader": "^2.0.2",
"typescript": "^2.0.0",
"webpack": "^2.1.0-beta.17"
}
}
index.ts:
export function MyFunc(params) {
console.log("hello world");
}
node -v
= v6.3.0npm -v
= 3.7.5
奇怪的是,我的一个朋友说这对他们来说没有错误。虽然他在node 4.2.6
。如果我将模块更改为 commonjs,它可以正常工作,没有警告或错误。
我认为你需要 "module": "commonjs"
在 tsconfig 中,这样 typescript 编译将发出 webpack 可以理解的模块,你仍然会从 webpack 获得 umd 输出
希望对您有所帮助
如果您无法将 module
从 umd
更改为 commonjs
,因为您只是在使用它,并且您无权访问源,您可以使用 umd-compat-loader
作为解决方法。将以下 rule
添加到您的 webpack.config.js
:
module: {
rules: [
// other rules come here.
{
test: /node_modules[\|/](name-of-the-umd-package)/,
use: { loader: 'umd-compat-loader' }
}
]
},
我已经为此添加了一些细节 thread。