为什么“exports-loader"Webpack 文档中的示例不起作用? [英] Why does the "exports-loader" example in Webpack's documentation not work?
问题描述
Webpack 在其匀场文档中提供了以下示例.在该页面的全局导出部分,给出了以下示例.
Webpack provides the example below in its shimming documentation. In the global exports portion of that page, it gives the following example.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve('globals.js'),
use: exports-loader?file,parse=helpers.parse
}
]
}
}
./src/globals.js
var file = 'blah.txt';
var helpers = {
test: function() { console.log('test something'); },
parse: function() { console.log('parse something'); }
};
但是当我尝试构建时,我得到:
But when I attempt to build, I get:
ERROR in ./webpack.config.js
Module not found: Error: Can't resolve 'globals.js' in '/workspace/my-app'
为什么 globals.js
不能解析,为什么他们文档中的例子假设可以解析?我错过了什么吗?谢谢.
Why is globals.js
not resolving, and why does the example in their documentation assume it will? Am I missing something? Thanks.
推荐答案
使其与全局 exports-loader
配置一起工作
我有以下设置:
Getting this to work with a global exports-loader
configuration
I have this working with the following setup:
src/deps.js//这个文件只是声明了一个全局的file
变量
src/deps.js // this file just declare a global file
variable
const file = 'this is the file';
src/app.js//webpack 包的入口点.它import
的deps.js
(即使deps.js
没有export
语句,感谢export-loader
):
src/app.js // entry point of the webpack bundle. It import
's deps.js
(even if deps.js
does not have an export
statement, thanks to export-loader
):
import file from './deps.js'
console.log(file);
webpack.config.js//webpack 配置文件
webpack.config.js // webpack configuration file
module.exports = {
entry: __dirname + '/src/app.js',
mode: 'development',
module: {
rules: [
{
test: /deps.js/,
use: 'exports-loader?file',
}
]
}
}
package.json//这样我们就可以在项目本地运行 webpack
package.json // so we can run webpack locally to the project
{
"name": "exports-loader-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "node_modules/webpack/bin/webpack.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"exports-loader": "^0.7.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}
使用此设置,假设 webpack.config.js
、package.json
和 src/
位于项目的根目录中,请执行:
With this setup, assuming webpack.config.js
, package.json
and src/
are in the root of the project, do:
$ npm run webpack
要捆绑脚本,然后:
$ node dist/main.js
检查 file
变量是否正在加载(在浏览器中加载也是如此).
$ node dist/main.js
to check that the file
variable is being loaded (to load this in a browser will do the same).
(这来自另一个答案).
为此,您只需要use
exports-loader
,在webpack.config 中加载它时无需任何进一步的配置.js
:
In order to do so, you need to use
just the exports-loader
, without any further configuration when you load it in the webpack.config.js
:
use: 'exports-loader',
然后在每个 import
语句中指定要包装在 export
子句中的变量:
And then specify the variables to wrap in an export
clause in every import
statement:
从'exports-loader?file!./deps.js'导入文件
我真的不知道.据我所知,test
子句需要一个正则表达式(这就是为什么它实际上被称为 test
,因为正则表达式的 test
方法在javascript),我不习惯其他类型的有效语法.我在您的代码段中看到了这一点:
I really don't know. The test
clause expects a regex as far as I know (that's why it is called test
in fact, because of the test
method of regex's in javascript) and I'm not used to other kind of valid syntaxes. I see that in your snippet:
module.exports = {
module: {
rules: [
{
test: require.resolve('globals.js'),
use: exports-loader?file,parse=helpers.parse
}
]
}
}
use
值没有字符串引号.我想知道这是否破坏了配置,然后你会得到一个误导性的错误,我不知道.我实际上相信您只是在复制和粘贴堆栈溢出时没有粘贴引号.
The use
value does not have string quotes. I wonder if this is broking the config and then you get a misleading error, I don't know. I actually believe you just didn't paste the quotes when copy and pasting to stack overflow.
这篇关于为什么“exports-loader"Webpack 文档中的示例不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!