Javascript 如何使用webpack在项目中设置多个文件入口和输出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31907672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set multiple file entry and output in project with webpack?
提问by user1775888
How to set multiple file entry/output in project with webpack?
如何使用 webpack 在项目中设置多个文件输入/输出？
I follow http://webpack.github.io/docs/tutorials/getting-started/success compile if only one file in one entry/output...
如果一个条目/输出中只有一个文件，我按照http://webpack.github.io/docs/tutorials/getting-started/成功编译...
directory
目录
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
...
how to output like this?
如何输出这样的？
././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
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"
// }
};
回答by Kania
For many entry points use arrays as a value of entryproperty:
对于许多入口点，使用数组作为entry属性值：
entry: {
app: ['./app/main.js', '.lib/index.js'],
vendors: ['react']
}
appand vendorsare arrays, so you can put there as many file paths as you need.
app和vendors是数组，因此您可以根据需要放置任意数量的文件路径。
For output case:
对于输出情况：
output: {
path: staticPath,
filename: '[name].js'
}
The [name]is taken from entryproperties, so if we have appand vendorsas properties, we got 2 output files - app.jsand vendors.js.
该[name]摘自entry特性，所以如果我们有app和vendors作为属性，我们得到了2个输出文件-app.js和vendors.js。
回答by Peter Tseng
If you want to output to multiple directories, you can use the path as the entry name. For example if you want this directory structure:
如果要输出到多个目录，可以使用路径作为条目名称。例如，如果你想要这个目录结构：
apps
├── dir1
│ └── js
│ ├── main.js [entry 1]
│ └── bundle.js [output 1]
└── dir2
├── index.js [entry 2]
└── foo.js [output 2]
Then try this in your module.exports:
然后在你的 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'
},
...
}
回答by Jo?o Gomes
what really solved it for me was this:
真正为我解决的是：
entry: {
app : __dirname + "/app/views/app/app.js",
admin : __dirname + "/app/views/admin/admin.js"
}
output: {
path: __dirname + "/public",
filename: "[name].js"
},
回答by Peter
You can detect multiple entries and generate separate output files by using glob syncpatterns.
您可以使用全局同步模式检测多个条目并生成单独的输出文件。
Put this into your webpack.config.js(without the ...)
把这个放到你的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, "")
},
...
});
This "should" give you the desired output.
这“应该”为您提供所需的输出。
回答by tcpiper
What if you want to get output files as foo.cssand bar.jsat the same time? the answers above seem incapable to handle this.
如果你想获得输出文件，foo.css并bar.js在同一时间？上面的答案似乎无法处理这个问题。
The sane way is to use multi-compiler. One input file one config object one output file. From this answer.
明智的方法是使用multi-compiler。一个输入文件一个配置对象一个输出文件。从这个答案。
回答by u4189704
this webpack plugin web-webpack-plugincan resolve it in a sample way.
这个 webpack 插件web-webpack-plugin可以通过示例方式解决它。
AutoWebPlugincan find all page entry in an directory,then auto config an WebPluginfor every page to output an html file,you can use it as below:
AutoWebPlugin可以在一个目录中找到所有页面条目，然后WebPlugin为每个页面自动配置一个输出一个html文件，您可以使用它如下：
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 directory
源目录
── src
│?? ├── home
│?? │?? └── index.js
│?? ├── ie_polyfill.js
│?? ├── login
│?? │?? └── index.js
│?? ├── polyfill.js
│?? ├── signup
│?? │?? └── index.js
│?? └── template.html
output directory
输出目录
├── dist
│?? ├── common.js
│?? ├── home.html
│?? ├── home.js
│?? ├── ie_polyfill.js
│?? ├── login.html
│?? ├── login.js
│?? ├── polyfill.js
│?? ├── signup.html
│?? └── signup.js
AutoWebPluginfind all page home login signupdirectory in ./src/,for this three page home login signupwill use index.jsas main file and output three html file home.html login.html signup.html`
AutoWebPlugin找到所有页面home login signup目录./src/，对于这三个页面home login signup将用index.js作主文件并输出三个html文件home.html login.html signup.html`
回答by sanjsanj
This question is 2 years old so I think the author has almost certainly moved on from this issue, but to anyone landing here more recently I had a really similar need and was able to write my own plugin to allow for dynamic output paths/names from known and/or unknown entry points.
这个问题已经有 2 年历史了，所以我认为作者几乎肯定已经从这个问题转向了，但是对于最近登陆这里的任何人，我有一个非常相似的需求，并且能够编写我自己的插件以允许动态输出路径/名称来自已知和/或未知的入口点。
My problem and thought process for the solution can be found here.
回答by llamacorn
For my use case I actually needed to use different templates based on environment. To achieve this I passed in the NODE_ENV variable
对于我的用例，我实际上需要根据环境使用不同的模板。为了实现这一点，我传入了 NODE_ENV 变量
module.exports = (env, argv) => {
const ENVIRONMENT = env.NODE_ENV;
let INDEX_HTML = 'index.html';
if (ENVIRONMENT === 'staging') {
INDEX_HTML = 'index-stg.html';
}
Then:
然后：
if (NODE_ENV === 'staging') {
INDEX_HTML = 'index-stg.html';
}
In the output:
在输出中：
output: {
path: process.cwd() + '/build',
filename: `[name].js`,
chunkFilename: `[${HASH_MODE}].[name].js`
},
plugins:
插件：
new HtmlWebpackPlugin({
inject: true,
template: `app/${INDEX_HTML}`,
}),
