Question

我有一个带有文件夹结构的反应项目

parentDir
- ＆GT; Dir1中
- ＆GT; Dir2中
- ＆GT; DIR3
- ＆GT; Dir4

我希望我的构建文件位于parentDir下的features目录下，其结构为

设有
- ＆GT; Dir1Bundle
- ＆GT; Dir2Bundle
- ＆GT; Dir3Bundle
- ＆GT; 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下。

请帮助我。

Answer 1

配置文件中存在很多错误

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

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

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

，当您为加载程序添加module.exports时，您将覆盖rules的上一个值

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

做

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

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

并使用这样的正确配置模式来定义多个入口点并使用copy-webpack-plugin在不同的地方复制yor文件

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

Webpack多个条目和多个构建文件

1 个答案: