如何在webpack的入口中添加通配符映射

Question

我需要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 doesn't exist
 (directory description file)

它没有搜索所有的js文件,而是搜索那样的*.js.帮我找错过的

Answer 1

对于大多数用例而言,只有一个或几个入口点就足够了,但如果您真的想要从目录中捆绑所有文件,则可以使用以下命令:

如下所述:https://github.com/webpack/webpack/issues/370

var glob = require("glob");
// ...
entry: glob.sync("./src/scripts/*.js")

Answer 2

的WebPack期待一个文件列表的entry配置,而不是glob模式.

您必须手动列出文件,或使用此代码段自动列出文件

var fs = require('fs'),
    entries = fs.readdirSync('./src/scripts/').filter(function(file) {
        return file.match(/.*\.js$/);
    });

然后将其传递给webpack的配置.

Answer 3

该entry值应解析为特定文件或特定文件列表.

来自webpack文档:

如果传递字符串:字符串将解析为启动时加载的模块.

如果传递数组:启动时加载所有模块.最后一个是导出的.

如果您只是尝试定义一个模块,请编辑您的entry值以指向您的主应用程序文件,然后需要其他模块.

如果您真的想要从目录中捆绑所有文件,请参阅arseniews的答案

Answer 4

我在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'
        })
    ]
}