如何使用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'] }
app
和vendors
都是数组,所以您可以根据需要放置尽可能多的文件path。
对于输出情况:
output: { path: staticPath, filename: '[name].js' }
[name]
取自entry
属性,所以如果我们有app
和vendors
作为属性,我们有2个输出文件 – app.js
和vendors.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.css
和bar.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
AutoWebPlugin
在AutoWebPlugin
find所有的页面home login signup
目录,对于这三个页面, home login signup
将使用index.js
作为主文件并输出三个html文件home.html login.html signup.html`
请参阅doc:自动检测html条目
这个问题已经两年了,所以我认为作者几乎肯定从这个问题上移开了,但是对于最近在这里登陆的人来说,我有一个非常相似的需求,并且能够编写我自己的插件来允许dynamic的输出path/名字已知的和/或未知的入口点。
我的问题和解决scheme的思考过程可以在这里find 。
节点包装在这里 。