javascript - 如何使用 webpack 在项目中设置多个文件输入和输出？

Question

如何使用 webpack 在项目中设置多个文件输入/输出？

我关注 http://webpack.github.io/docs/tutorials/getting-started/如果一个条目/输出中只有一个文件，则编译成功...

目录

app
webpack.config.js
./assets
././javascripts/Administrator/Article/Create/Base.js
././javascripts/Administrator/Article/Edit/Base.js
././javascripts/Account/Index/Base.js
././javascripts/Contact/Index/Base.js
...

这样怎么输出？

././javascripts/Administrator/Article/Create/bundle.js
././javascripts/Administrator/Article/Edit/bundle.js
././javascripts/Account/Index/bundle.js
././javascripts/Contact/Index/bundle.js

webpack.config.js

module.exports = {
  entry: {
    'AdministratorArticleCreate':['./assets/javascripts/Administrator/Article/Create/Base.js']
  },
  output: {
    path: 
  }

    // if only one file
    // entry: "./assets/javascripts/Administrator/Article/Create/Base.js",
    // output: {
    //     // path: __dirname,
    //     path: "./assets/javascripts/Administrator/Article/Create/",
    //     filename: "bundle.js"
    // }
};

Answer 1

对于许多入口点，使用数组作为 entry 属性的值:

entry: {
  app: ['./app/main.js', '.lib/index.js'],
  vendors: ['react']
}

app 和 vendors 是数组，因此您可以根据需要在其中放置任意数量的文件路径。

对于输出案例:

output: {
  path: staticPath,
  filename: '[name].js'
}

[name] 取自 entry 属性，所以如果我们有 app 和 vendors 作为属性，我们得到了 2 个输出文件 - app.js 和 vendors.js。

Documentation link