如何的WebPack

Question

我需要的条目添加通配符映射到的WebPack在脚本中的所有js文件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那样。帮我出去什么我错过了

Answer 1

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

从webpack docs：

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

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

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

如果你真的想捆绑从一个目录下的所有文件，请参阅arseniews answer

Answer 2

Webpack期待list of files为entry配置，而不是glob pattern。

你必须手动列出文件，或自动与该代码段

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

，然后把它传递给的WebPack的配置。

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，所以使这个。

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返回一个数组。

以下方法的优点是可以基于文件名生成包含键和值的对象，还可以添加其他条目，例如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' ] 
}