如何在 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

Webpack 期望 list of files 用于 entry 配置，而不是 glob pattern。

您必须手动列出文件，或使用此代码 sn-p 自动列出文件

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

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

Answer 2

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

来自webpack docs：

如果您传递一个字符串：该字符串被解析为一个模块，该模块是 启动时加载。

如果您传递一个数组：所有模块在启动时加载。最后 一个被导出。

如果您只是想定义一个模块，请编辑您的 entry 值以指向您的主应用程序文件，然后从该文件中要求其他模块。

如果您真的想捆绑目录中的所有文件，请参阅arseniews answer

Answer 3

对于大多数用例来说，只有一个或几个入口点就足够了，但如果您真的想要捆绑目录中的所有文件，您可以使用以下方法：

这里解释：https://github.com/webpack/webpack/issues/370

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

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

Answer 5

仅使用glob.sync 会产生连续的文件名，例如0.[hash].js 和1.[hash].js，因为entry 需要一个对象，其文件名在键中，其位置在值中，但@ 987654325@返回一个数组。

以下方法的好处是可以根据文件名生成具有键和值的对象，您还可以添加其他条目，例如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')
  }
}

后者将生成以下对象并将其传递给entry，前提是./src 目录中有index.js 和app.js：

{
    index: './src/index.js',
    app: './src/app.js',
    vendor: [ 'lodash' ]
}

Answer 6

正如上面多次指出的，问题是，entry: 要求它提供 1 个扁平数组，所以使用glob（也如上所述），我写了这个简单的解决方案来解决我的问题：

const path = require("path");
const glob = require("glob");

const flattenedEntryFiles = () => {
    // wildcard inclusions
    const vendorCss = glob.sync(__dirname + "/src/css/vendor/**/*.css");
    const customCss = glob.sync(__dirname + "/src/css/*.css");

    // fixed path inclusions    
    const customSrcFiles = [
        __dirname + "/src/js/main.tsx",
        __dirname + "/src/css/scss/main.scss",
    ];

    // combine/flatten into 1 array
    return vendorCss.concat(customCss, customSrcFiles);
};

module.exports = () => {
    return {
        entry: flattenedEntryFiles(),
    }
}