web-dev-qa-db-ja.com

webpackを使用してプロジェクトに複数のファイルエントリと出力を設定するにはどうすればよいですか？

Webpackを使用してプロジェクトに複数のファイルエントリ/出力を設定するにはどうすればよいですか？

http://webpack.github.io/docs/tutorials/getting-started/ 1つのエントリ/出力に1つのファイルしかなければ成功コンパイル...

ディレクトリ

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"
    // }
};
javascriptnode.jswebpack
57
user1775888

多くのエントリポイントでは、配列を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）が得られます。

ドキュメントリンク

57
Kania

複数のディレクトリに出力する場合は、パスをエントリ名として使用できます。たとえば、このディレクトリ構造が必要な場合：

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'
  },
  ...
}
48
Peter Tseng

私にとって本当にそれを解決したのはこれでした：

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

output: {
    path: __dirname + "/public",
    filename: "[name].js"
},
20
João Gomes

出力ファイルをfoo.cssとbar.jsとして同時に取得したい場合はどうしますか？上記の答えはこれを処理できないようです。

正しい方法は multi-compiler を使用することです。 1つの入力ファイル、1つの構成オブジェクト、1つの出力ファイル。これから answer 。

4
tcpiper

このwebpackプラグイン web-webpack-plugin は、サンプルの方法で解決できます。

AutoWebPluginはディレクトリ内のすべてのページエントリを見つけることができ、次にhtml [ファイルを出力するすべてのページに対してWebPluginを自動設定します。以下のように使用できます。

webpack config

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ディレクトリ

── 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/で、この3つのページに対してhome login signupはindex.jsをメインファイルとして使用し、3つのhtmlファイルhome.htmlログインを出力します。 html signup.html`

doc：htmlエントリの自動検出 を参照してください

3
吴浩麟

この質問は2歳ですので、著者はほぼ確実にこの問題から離れたと思いますが、最近ここに着いた人には本当に似たニーズがあり、動的な出力パス/名前を許可する独自のプラグインを書くことができました既知および/または未知のエントリポイント。

解決のための私の問題と思考プロセスはここにあります 。

およびNodeパッケージ自体 。

2
sanjsanj

glob sync パターンを使用して、複数のエントリを検出し、個別の出力ファイルを生成できます。

これを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, "")
  },
  ...
});

これにより、目的の出力が得られます。

2
Peter

私のユースケースでは、環境に基づいて異なるテンプレートを実際に使用する必要がありました。これを実現するために、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}`,
      }),
1
llamacorn