问题描述
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 文档中的示例不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!