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

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

我按照http://webpack.github.io/docs/tutorials/getting-started/成功编译,如果只有一个文件在一个input/输出…

目录

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

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

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

appvendors都是数组,所以您可以根据需要放置尽可能多的文件path。

对于输出情况:

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

[name]取自entry属性,所以如果我们有appvendors作为属性,我们有2个输出文件 – app.jsvendors.js

文档链接

如果要输出到多个目录,则可以使用该path作为条目名称。 例如,如果你想要这个目录结构:

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

真的为我解决了这个

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

如果你想同时把输出文件作为foo.cssbar.js呢? 上面的答案似乎无能为力。

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

这个webpack插件web-webpack-plugin可以通过一个样例来解决它。

AutoWebPlugin可以find目录中的所有页面条目,然后自动为每个页面configuration一个WebPlugin来输出一个html文件,你可以像下面这样使用它:

webpackconfiguration

 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 

AutoWebPluginAutoWebPluginfind所有的页面home login signup目录,对于这三个页面, home login signup将使用index.js作为主文件并输出三个html文件home.html login.html signup.html`

请参阅doc:自动检测html条目

这个问题已经两年了,所以我认为作者几乎肯定从这个问题上移开了,但是对于最近在这里登陆的人来说,我有一个非常相似的需求,并且能够编写我自己的插件来允许dynamic的输出path/名字已知的和/或未知的入口点。

我的问题和解决scheme的思考过程可以在这里find 。

节点包装在这里 。