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

JavaScript Webpack

猴子

2020-03-23

如何使用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"
    // }
};

第3028篇《如何使用webpack在项目中设置多个文件的输入和输出？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
凯阿飞 2020.03.23

这个问题已有2年历史了，所以我认为作者几乎可以肯定已经不再关注这个问题了，但是对于最近登陆这里的任何人，我的需求都非常相似，并且能够编写自己的插件以允许来自以下位置的动态输出路径/名称已知和/或未知入口点。

我的解决方案的问题和思考过程可以在这里找到。

和Node包本身在这里。

Gil 2020.03.23

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

将此放入您的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, "")
  },
  ...
});

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

斯丁前端 2020.03.23

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

理智的方法是使用多编译器。一个输入文件一个配置对象一个输出文件。从这个答案。

神乐 2020.03.23

真正为我解决的是：

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android