如何使用webpack在项目中设置多个文件入口和输出? [英] How to set multiple file entry and output in project with webpack?

问题描述

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

How to set multiple file entry/output in project with webpack?

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

I follow http://webpack.github.io/docs/tutorials/getting-started/ success compile if only one file in one entry/output...

目录

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

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"
    // }
};

推荐答案

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

For many entry points use arrays as a value of entry property:

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

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

app and vendors are arrays, so you can put there as many file paths as you need.

对于输出案例:

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

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

The [name] is taken from entry properties, so if we have app and vendors as properties, we got 2 output files - app.js and vendors.js.

文档链接

这篇关于如何使用webpack在项目中设置多个文件入口和输出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！