如何使用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 。

文档链接

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输出文件foo.css bar.js ？ 上面的答案似乎无法处理这个问题。

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

Answer 6

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

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

网络包配置

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

源目录

── src
│   ├── home
│   │   └── index.js
│   ├── ie_polyfill.js
│   ├── login
│   │   └── index.js
│   ├── polyfill.js
│   ├── signup
│   │   └── index.js
│   └── template.html

输出目录

├── dist
│   ├── common.js
│   ├── home.html
│   ├── home.js
│   ├── ie_polyfill.js
│   ├── login.html
│   ├── login.js
│   ├── polyfill.js
│   ├── signup.html
│   └── signup.js

AutoWebPlugin找到所有网页home login signup目录./src/ ，对于这三页home login signup将使用index.js作为主文件和输出了3个HTML文件home.html的login.html的signup.html`

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

Answer 7

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

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

和 Node 包本身在这里。

Answer 8

对于我的用例，我实际上需要根据环境使用不同的模板。 为了实现这一点，我传入了 NODE_ENV 变量

module.exports = (env, argv) => {
  const ENVIRONMENT = env.NODE_ENV;
  let INDEX_HTML = 'index.html';
  if (ENVIRONMENT === 'staging') {
    INDEX_HTML = 'index-stg.html';
  }

然后：

if (NODE_ENV === 'staging') {
   INDEX_HTML = 'index-stg.html';
}

在输出中：

output: {
      path: process.cwd() + '/build',
      filename: `[name].js`,
      chunkFilename: `[${HASH_MODE}].[name].js`
    },

插件：

new HtmlWebpackPlugin({
        inject: true,
        template: `app/${INDEX_HTML}`,
      }),

Answer 9

使用以下内容，我能够让 webpack 搜索打字稿和 sass 文件。

...
entry: glob
  .sync("./src/{sass,js}/**/*.{ts,scss}")
  .reduce(function (obj, el) {
    obj[path.parse(el).name] = el;
    return obj;
  }, {}),
...