node.js - online - Cómo agregar la asignación de comodines en la entrada del paquete web

webpack-- w

Question

Necesito empacar todo el archivo js en la carpeta de scripts. Intenté esto

module.exports = {
  module: {
    loaders: [
      {
        test: //.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      }
    ],
  },
  entry: "./src/scripts/*.js",
  output: {
    path: ''./src/build'',
    filename: ''[name].js''
  }
};

Recibo un error como este,

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)

No está buscando todo el archivo js sino que está buscando * .js así. Ayúdame a descubrir lo que me perdí

Answer 1

El glob.sync uso de glob.sync dará como resultado nombres de archivos secuenciales, como 0.[hash].js y 1.[hash].js , porque la entry espera un objeto con el nombre del archivo en la clave y su ubicación en el valor , pero glob.sync devuelve una matriz.

El siguiente método tiene la ventaja de producir un objeto con claves y valores basados ​​en los nombres de los archivos, también puede agregar entradas adicionales, como vendor y common . Requiere 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'')
  }
}

Este último producirá el siguiente objeto y lo pasará a la entry , siempre que tengamos index.js y app.js en el directorio ./src :

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

Answer 2

El valor de entry debe resolverse en un archivo específico, o una lista de archivos específicos.

De los documentos de la carpeta web :

Si pasa una cadena: La cadena se resuelve en un módulo que se carga al inicio.

Si pasa una matriz: todos los módulos se cargan al inicio. El último es exportado.

Si simplemente está tratando de definir un módulo, edite el valor de entry para que apunte al archivo principal de la aplicación y luego solicite otros módulos.

Si realmente desea agrupar todos los archivos de un directorio, consulte la respuesta de arseniews

Answer 3

Tener uno o pocos puntos de entrada debería ser suficiente para la mayoría de los casos de uso, pero si realmente desea agrupar todos los archivos del directorio, puede usar lo siguiente:

Como se explica aquí: https://github.com/webpack/webpack/issues/370

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

Answer 4

Tuve algunos problemas con las rutas de archivos en Webpack 2.4.1, así que hice esto. Además de las entradas múltiples, esto también crea múltiples archivos .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

Webpack espera una lista de archivos para la configuración de entry , no un patrón global .

Deberá enumerar los archivos de forma manual o automática con este fragmento de código

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

y luego pasarlo a la configuración del paquete web.