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

Question

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

如果一个条目/输出中只有一个文件,我按照http://webpack.github.io/docs/tutorials/getting-started/ success compile ...

目录

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.

文档链接

Answer 2

如果要输出到多个目录,可以使用路径作为条目名称.例如,如果您想要此目录结构:

apps
??? dir1
?   ??? js
?       ??? main.js [entry 1]
?       ??? bundle.js [output 1]
??? dir2
    ??? index.js [entry 2]
    ??? foo.js [output 2]

然后在你的module.exports中试试这个:

{
  entry: {
    'dir1/js/bundle': path.resolve(__dirname, '/apps/dir1/js/main.js'),
    'dir2/foo' : path.resolve(__dirname, '/apps/dir2/index.js')
  },
  output: {
    path: path.resolve(__dirname, '/apps'),
    filename: '[name].js'
  },
  ...
}

Answer 3

真正为我解决的是:

entry:  {
    app : __dirname + "/app/views/app/app.js",
    admin : __dirname + "/app/views/admin/admin.js"
}

output: {
    path: __dirname + "/public",
    filename: "[name].js"
},

Answer 4

您可以使用全局同步模式检测多个条目并生成单独的输出文件。

把这个放到你的webpack.config.js（没有...）

const glob = require("glob");
...
module.exports = (env, options) => ({
  ...
  entry: glob.sync("./javascripts/**/*.js").reduce((acc, item) => {
    const path = item.split("/");
    path.pop();
    const name = path.join('/');
    acc[name] = item;
    return acc;
  }, {}),
  output: {
    filename: "[name]/bundle.js",
    path: path.resolve(__dirname, "")
  },
  ...
});

这“应该”为您提供所需的输出。

Answer 5

如果你想获得输出文件，foo.css并bar.js在同一时间？上面的答案似乎无法处理这个问题。

明智的方法是使用multi-compiler。一个输入文件一个配置对象一个输出文件。从这个答案。

Answer 6

这个 webpack 插件web-webpack-plugin可以通过示例方式解决它。

\n\n

AutoWebPlugin可以找到目录中的所有页面条目，然后自动WebPlugin为每个页面配置一个输出html文件，您可以按如下方式使用它：

\n\n

网页包配置

\n\n

module.exports = {\n    plugins: [\n        new AutoWebPlugin(\n            // the directory hold all pages\n            \'./src/\', \n            {\n            // the template file path used by all pages\n            template: \'./src/template.html\',\n            // javascript main file for current page,if it is null will use index.js in current page directory as main file\n            entity: null,\n            // extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action\n            // achieve by CommonsChunkPlugin\n            commonsChunk: \'common\',\n            // pre append to all page\'s entry\n            preEntrys:[\'./path/to/file1.js\'],\n            // post append to all page\'s entry\n            postEntrys:[\'./path/to/file2.js\'],\n        }),\n    ]\n};\n

\n\n

源目录

\n\n

\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 home\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ie_polyfill.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 login\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 polyfill.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 signup\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 template.html\n

\n\n

输出目录

\n\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 common.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 home.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 home.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ie_polyfill.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 login.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 login.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 polyfill.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 signup.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 signup.js\n

\n\n

AutoWebPlugin找到所有页面home login signup目录./src/，这三个页面home login signup将用index.js作主文件并输出三个html文件 home.html login.html signup.html`

\n\n

请参阅文档：自动检测 html 条目

\n