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

Question

我需要对脚本中的所有 js 文件进行 webpack folder.I 试过这个

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 之类的 that.Help 我找出我错过的东西

Answer 1

Webpack 期待 list of files for the entry configuration, not a glob pattern。

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

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

然后传给webpack的config.

Answer 2

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

来自webpack docs：

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.

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

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

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 需要一个具有文件名的对象键及其在值中的位置，但是 glob.sync returns 一个数组。

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

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

How to add wildcard mapping in entry of webpack

node.js

webpack