我需要webpack脚本文件夹中的所有js文件.我试过这个
module.exports = {
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ["babel-loader"],
}
],
},
entry: "./src/scripts/*.js",
output: {
path: './src/build',
filename: '[name].js'
}
};
我收到这样的错误,
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./s
rc/scripts/* in E:\Web project\ReactJS\react-tutorial
resolve file
E:\Web project\ReactJS\react-tutorial\src\scripts\* doesn't exist
E:\Web project\ReactJS\react-tutorial\src\scripts\*.webpack.js doesn't exist
E:\Web project\ReactJS\react-tutorial\src\scripts\*.web.js doesn't exist
E:\Web project\ReactJS\react-tutorial\src\scripts\*.js doesn't exist
E:\Web project\ReactJS\react-tutorial\src\scripts\*.json doesn't exist
resolve directory
E:\Web project\ReactJS\react-tutorial\src\scripts\* doesn't exist (directory d
efault file)
E:\Web project\ReactJS\react-tutorial\src\scripts\*\package.json …在我的项目中，我想导入特定的模块，它们的实际路径仅在编译期间才知道。
假设我有Components/A.js、Components/B.js和Components/C.js，在我的App.js中，我想包含其中的一个子集，这些子集仅在 webpack 的编译时才知道（例如，来自一个 JSON）
我尝试过的 - 1
//App.js
compileData = await getCompileDataSomehow()
import("./components/" + compileData.component + ".js")
.then( /* Do stuff with component */);
这项工作很好，但是 webpack 将为每个components/*.js文件创建一个块。此外，还会有额外的网络往返。我觉得这有点矫枉过正，因为当 webpack 运行时我就会知道我想要什么组件。所以我尝试提供组件数组，但没有运气，因为require([...])也被认为是动态的。
我最终得到了什么
//App.js
import("./components/ALL.js") //this file doesn't actually exists
//webpack.config.js
const fs = require('fs')
const componentsToInclude = ["A", "B"] //this will be read from a json
fs.writeFileSync('./src/components/ALL.js',
`
export default [
${componentsToInclude.map(comp => `require("./${comp}.js")` )}
].map(c => …一般来说，我想知道如何按需在 Webpack 插件中进行代码生成/制作。我想为“需要”时不存在的文件生成内容。
具体来说，我想要一个插件，当我需要一个目录时，它会自动需要该目录中的所有文件（递归地）。
例如，假设我们有以下目录结构：
main.js 有：
var foo = require("./foo");
// ...
我希望 webpack 自动生成 foo/index.js：
module.exports = {
bar: require("./bar"),
baz: require("./baz")
};
我已经阅读了大部分 webpack 文档。github.com/webpack/docs/wiki/How-to-write-a-plugin有一个生成资产的示例。但是，我找不到如何按需生成资产的示例。看起来这应该是一个解析器，但是解析器似乎只输出文件路径，而不输出文件内容。
我想为网站创建多个入口点,这很容易在Webpack中使用entry属性的对象完成,就像这里一样.
但随着网站的增长(并且不可避免地)必须添加每个入口点似乎很麻烦并且容易出错.所以我想简单地指向一个目录并说"这里是所有入口点."
所以我把它煮熟了:
var path = require('path');
var fs = require('fs');
var entryDir = path.resolve(__dirname, '../source/js');
var entries = fs.readdirSync(entryDir);
var entryMap = {};
entries.forEach(function(entry){
var stat = fs.statSync(entryDir + '/' + entry);
if (stat && !stat.isDirectory()) {
var name = entry.substr(0, entry.length -1);
entryMap[name] = entryDir + '/' + entry;
}
});
module.exports = {
entry: entryMap,
output: {
path: path.resolve(__dirname, '../static/js'),
filename: "[name]"
},
...
这工作正常,但Webpack中是否有一个功能或配置选项可以为我处理这个？
我有一个文件夹，里面有很多 JSON 文件：
-json
--file1.json
--anotherfile.json
...
--lastfile.json
如何从该文件夹中导入所有这些文件，而无需明确定义它们的名称？
假设，我应该使用这样的东西：
import * as jsonFiles from './json'
但它不起作用。
那么，我该怎么做呢？
重要说明：这不是 Node.js，我在客户端将它与 React 一起使用。
我正在使用React和Webpack.
我有一个React组件,它采用一个url并显示图像.
由于React在运行之前不会知道图像网址,因此webpack仍然可以"需要"图像网址吗？
import React, {Component} from 'react'
export default class Episode extends Component {
constructor(props){
super(props)
}
render(){
let imageStyle = {backgroundImage: 'url(' + this.props.episode.url +')'}
return (
<div className="episode">
<div className="image" style={imageStyle}>
<h2>{this.props.episode.category}</h2>
</div>
<h3>Episode {this.props.episode.number}</h3>
</div>
)
}
}
作为参考,我的图片位于:
src/assets/images
我的网站正在建设中 dist
编辑：存在一个关于加载多个文件的现有问题，但没有充分解决如何将 JSON 文件合并到单个对象中。请参阅下面的答案。这个问题不是重复的。
我有一个包含 100 个左右 JSON 文件的目录，我想将它们加载到我的 js 应用程序中，该应用程序通过 WebPack 捆绑。
我可以经历写下以下内容的最初痛苦：
let data = [
require('json!./Mocks/0.json'),
require('json!./Mocks/1.json'),
// 2 - 98...
require('json!./Mocks/99.json'),
require('json!./Mocks/error.json'),
require('json!./Mocks/foo.json'),
];
但我更愿意自动获取所有内容，这样当我将来向该目录添加/删除 JSON 文件时就不必更新代码。我怎样才能做到这一点？