node.js 如何在webpack入口添加通配符映射
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32874025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add wildcard mapping in entry of webpack
提问by Praveen Raj
I need to webpack all the js file in the script folder.I tried this
我需要 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'
}
};
I am getting error like this,
我收到这样的错误，
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 doesn't exist
(directory description file)
It is not searching for all the js file instead it is searching for *.js like that.Help me out what I missed
它不是在搜索所有的 js 文件，而是在像那样搜索 *.js。帮我找出我错过的东西
采纳答案by duncanhall
The entryvalue should resolve to a specific file, or a list of specific files.
该entry值应解析为特定文件或特定文件列表。
From the webpack docs:
来自webpack 文档：
If you pass a string: The string is resolved to a module which is loaded upon startup.
If you pass an array: All modules are loaded upon startup. The last one is exported.
如果您传递一个字符串：该字符串被解析为一个在启动时加载的模块。
如果你传递一个数组：所有模块在启动时加载。最后一个导出。
If you are simply trying to define one module, edit your entryvalue to point to your main application file and then require other modules from that.
如果您只是尝试定义一个模块，请编辑您的entry值以指向您的主应用程序文件，然后从中调用其他模块。
If you really want to bundle all files from a directory, see arseniews answer
如果您真的想捆绑目录中的所有文件，请参阅arseninews 答案
回答by arseniew
Having one or few entry points should be enough for most of use cases, but if you reallywant to bundle up all files from directory you can use following:
对于大多数用例来说，只有一个或几个入口点就足够了，但是如果您真的想捆绑目录中的所有文件，则可以使用以下方法：
As explained here: https://github.com/webpack/webpack/issues/370
如此处所述：https: //github.com/webpack/webpack/issues/370
var glob = require("glob");
// ...
entry: glob.sync("./src/scripts/*.js")
回答by kombucha
Webpack is expecting a list of filesfor the entryconfiguration, not a glob pattern.
的WebPack期待一个文件列表的entry配置，而不是glob模式。
You'll have to list the files manually, or automatically with this code snippet
您必须手动或使用此代码段自动列出文件
var fs = require('fs'),
entries = fs.readdirSync('./src/scripts/').filter(function(file) {
return file.match(/.*\.js$/);
});
and then pass it to webpack's config.
然后将其传递给 webpack 的配置。
回答by Jkarttunen
I had some problems with file paths in Webpack 2.4.1, so made this. In addition to multiple entries, this also creates multiple .html files.
我在 Webpack 2.4.1 中的文件路径有一些问题，所以做了这个。除了多个条目之外，这还会创建多个 .html 文件。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
function getEntries (){
return fs.readdirSync('./src/pages/')
.filter(
(file) => file.match(/.*\.js$/)
)
.map((file) => {
return {
name: file.substring(0, file.length - 3),
path: './pages/' + file
}
}).reduce((memo, file) => {
memo[file.name] = file.path
return memo;
}, {})
}
const config = {
entry: getEntries,
output: {
path: resolve('./public'),
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: '[name].html',
template: './pages/_template.html'
})
]
}
回答by Víctor González
Just using glob.syncwill result in sequential filenames, such as 0.[hash].jsand 1.[hash].js, because entryexpects an object with the the name of the file in the key and its location in the value, but glob.syncreturns an array.
仅使用glob.sync将导致连续的文件名，例如0.[hash].jsand 1.[hash].js，因为entry期望一个对象具有键中的文件名及其在值中的位置，但glob.sync返回一个数组。
The following method has the benefit of producing an object with keys and values based on the filenames, you can also add additional entries, such as vendorand common. Requires lodash.
以下方法的好处是可以根据文件名生成具有键和值的对象，您还可以添加其他条目，例如vendor和common。需要 lodash。
const glob = require("glob");
const _ = require('lodash');
module.exports = {
entry: Object.assign({},
_.reduce(glob.sync("./src/*.js"),
(obj, val) => {
const filenameRegex = /([\w\d_-]*)\.?[^\\/]*$/i;
obj[val.match(filenameRegex)[1]] = val;
return obj;
},
{}),
{
vendor: [
'lodash'
]
}
),
output: {
filename: '[name].[chunkhash].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
The latter will produce the following object and pass it to entry, provided we have index.jsand app.jsin the ./srcdirectory:
后者将生成以下对象并将其传递给entry，前提是我们在目录中具有index.js和：app.js./src
{
index: './src/index.js',
app: './src/app.js',
vendor: [ 'lodash' ]
}
