const path = require('path')
module.exports = {
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 }
}

const path = require('path')

module.exports = function (env, argv) {
 return {
  entry: './src/' + argv['entry-filename'] + '.js',
  output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist'),
  },
  devtool: env.prod "htmlcode">

webpack --env.prod --entry-filename=index


注意，凡是webpack配置文件中使用到的命令行参数，例如argv["entry-filename"]，均需要在命令行传入，一个不能遗漏，否则webpack会报错：Config did not export an object
3、导出为一个Promise对象


除了导出为一个函数，webpack还支持我们异步获取配置变量来配置相关文件。（真是很强大！）
为了体现异步获取数据的过程，我们把webpack.config.js修改为以下内容：


const path = require('path')
module.exports = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve({
    entry: './src/index.js',
    output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
    }
   })
  }, 1000)
 })
}




4、导出多个配置


修改webpack.config.js的内容如下：


const path = require('path')

module.exports = [
 {
  name: 'index',
  entry: './src/index.js',
  output: {
   filename: 'index.js',
   path: path.resolve(__dirname, 'dist')
  },
  mode: 'production'
 },
 {
  name: 'main',
  entry: './src/main.js',
  output: {
   filename: 'main.js',
   path: path.resolve(__dirname, 'dist')
  }
 }
]




当我们运行webpack时，以上多个配置都会被构建出来。如果我们只想构建其中一份代码，那么只需要传入--config-name参数即可：
webpack --config-name=index
webpack --config-name=main
如上所示，我们可以分别构建出name为index、name为main的配置对象所配置的内容。
以上配置常见的场景有：npm包利用不同的模块语法构建不同的输出文件，供不同的项目进行使用：


module.exports = [{
 output: {
  filename: './dist-amd.js',
  libraryTarget: 'amd'
 },
 name: 'amd',
 entry: './app.js',
 mode: 'production',
},{
 output: {
  filename: './dist-commonjs.js',
  libraryTarget: 'commonjs'
 },
 name: 'commonjs',
 entry: './app.js',
 mode: 'production',
}]



总而言之，webpack为我们提供了众多灵活的配置解决方案。当我们遇到复杂项目的时候，只要明确心中需求，大多数都能够找到对应的解决方案。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。