Webpack 网页包多条目和多个生成文件

我有一个react项目，文件夹结构如下

• parentDir
  -->Dir1
  -->Dir2
  -->Dir3
  -->Dir4

我希望我的构建文件位于features目录中，该目录位于parentDir下，结构如下

• 功能
  -->Dir1Bundle
  -->Dir2Bundle
  -->Dir3Bundle
  -->Dir4Bundle

我的webpack.config.js文件是

var path = require('path');

module.exports = [{
  output: {
    path: __dirname + './features/bulletinBoard',
    publicPath: '/',
    filename: 'bundle.js'
  },
  entry: './Bulletin_Board/index.js',
}, {
  output: {
    path: __dirname + './features/communityDirectory',
    publicPath: '/',
    filename: 'bundle.js'
  },
  entry: './Community_Directory/index.js',
}];

module.exports = {
  module: {
    rules: [
      {test: /\.js$/, include: path.join(__dirname, 'Bulletin_Board'), loaders: ['babel']},
      {test: /(\.css)$/, loaders: ['style', 'css']},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=500000' },
      { test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=500000&mimetype=image/svg+xml' },
      { test: /\.eot/, loader: 'url-loader?limit=300000&mimetype=application/vnd.ms-fontobject' },
      { test: /\.woff2/, loader: 'url-loader?limit=300000&mimetype=application/font-woff2' },
      { test: /\.woff/, loader: 'url-loader?limit=300000&mimetype=application/font-woff' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=300000&mimetype=application/font-ttf' }
    ]
  }
};

根据我的说法，一切都很好，但我也犯了错误

webpack 1.15.0
Usage: https://webpack.github.io/docs/cli.html

Options:
  --help, -h, -?
  --config
  --context
  --entry
  --module-bind
  --module-bind-post
  --module-bind-pre
  --output-path
  --output-file
  --output-chunk-file
  --output-named-chunk-file
  --output-source-map-file
  --output-public-path
  --output-jsonp-function
  --output-pathinfo
  --output-library
  --output-library-target
  --records-input-path
  --records-output-path
  --records-path
  --define
  --target
  --cache                                                                                           [default:
  --watch, -w
  --watch which closes when stdin ends
  --watch-aggregate-timeout
  --watch-poll
  --hot
  --debug
  --devtool
  --progress
  --resolve-alias
  --resolve-loader-alias
  --optimize-max-chunks
  --optimize-min-chunk-size
  --optimize-minimize
  --optimize-occurence-order
  --optimize-dedupe
  --prefetch
  --provide
  --labeled-modules
  --plugin
  --bail
  --profile
  -d                                    shortcut for --debug --devtool sourcemap --output-pathinfo
  -p                                    shortcut for --optimize-minimize
  --json, -j
  --colors, -c
  --sort-modules-by
  --sort-chunks-by
  --sort-assets-by
  --hide-modules
  --display-exclude
  --display-modules
  --display-chunks
  --display-error-details
  --display-origins
  --display-cached
  --display-cached-assets
  --display-reasons, --verbose, -v

Output filename not configured.

我不知道我遗漏了什么，我的文件名也是正确的。我的

webpack.config.js

在parentDir下

---

请帮帮我。

您的配置文件中有很多错误

您需要导出配置对象而不是数组

module.exports = [{
  // wrong
  ...
}]

module.exports = {
  //right
  ...
}

当您为装载机添加

规则时，您正在覆盖
模块的上一个值。导出
代替

module.exports = {
  module: {
    rules: [
    ...
    ]
  }
}

做

这将添加新属性，而不是覆盖现有属性

并使用这样的正确配置模式来定义多个入口点
并使用复制网页包插件在不同的地方复制你的文件

var path = require('path');

module.exports = {
  entry: [
    './Bulletin_Board/index.js',
    './second_entry_file.js' 
  ],

  output: {
    path: __dirname + './features/communityDirectory',
    publicPath: '/',
    filename: 'bundle.[name].js'
  },

  module: {
    rules: [
      {test: /\.js$/, include: path.join(__dirname, 'Bulletin_Board'), loaders: ['babel']},
      {test: /(\.css)$/, loaders: ['style', 'css']},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=500000' },
      { test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=500000&mimetype=image/svg+xml' },
      { test: /\.eot/, loader: 'url-loader?limit=300000&mimetype=application/vnd.ms-fontobject' },
      { test: /\.woff2/, loader: 'url-loader?limit=300000&mimetype=application/font-woff2' },
      { test: /\.woff/, loader: 'url-loader?limit=300000&mimetype=application/font-woff' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=300000&mimetype=application/font-ttf' }
    ]
  }
};

配置文件中有很多错误

您需要导出配置对象而不是数组

module.exports = [{
  // wrong
  ...
}]

module.exports = {
  //right
  ...
}

当您为装载机添加
规则时，您正在覆盖
模块的上一个值。导出
代替

module.exports = {
  module: {
    rules: [
    ...
    ]
  }
}

做

这将添加新属性，而不是覆盖现有属性

并使用这样的正确配置模式来定义多个入口点
并使用复制网页包插件在不同的地方复制你的文件

var path = require('path');

module.exports = {
  entry: [
    './Bulletin_Board/index.js',
    './second_entry_file.js' 
  ],

  output: {
    path: __dirname + './features/communityDirectory',
    publicPath: '/',
    filename: 'bundle.[name].js'
  },

  module: {
    rules: [
      {test: /\.js$/, include: path.join(__dirname, 'Bulletin_Board'), loaders: ['babel']},
      {test: /(\.css)$/, loaders: ['style', 'css']},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=500000' },
      { test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=500000&mimetype=image/svg+xml' },
      { test: /\.eot/, loader: 'url-loader?limit=300000&mimetype=application/vnd.ms-fontobject' },
      { test: /\.woff2/, loader: 'url-loader?limit=300000&mimetype=application/font-woff2' },
      { test: /\.woff/, loader: 'url-loader?limit=300000&mimetype=application/font-woff' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=300000&mimetype=application/font-ttf' }
    ]
  }
};

我希望输出也在不同的文件夹“路径：_dirname+”./features/[name]”中。是将在不同文件夹中提供输出否这不会在不同文件夹中提供输出，但有一个网页包插件，它会在编译后将您的文件复制到不同文件夹中查看此插件我希望输出也在不同文件夹中“路径：_dirname+”./features/[name]”。是否会在不同的文件夹中提供输出？否这不会在不同的文件夹中提供输出，但有一个网页包插件，它会在编译后将您的文件复制到不同的文件夹中。请查看此插件